資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML中建立帶短劃線的列表？
列表是指以邏輯或線性格式顯示的任何資訊。它是由專案組成的集合，以有意義的組或序列編寫，並用專案符號、數字等表示。HTML列表有助於語義化地顯示資訊列表。在HTML中，有三種類型的列表
無序列表或專案符號列表 (ul)
HTML無序列表中的列表項沒有特定的順序或序列。因為專案用專案符號標記，所以無序列表也稱為專案符號列表。它以<ul>標籤開頭，以</ul>標籤結束。列表項由<li>標籤分隔，並以</li>標籤結束。
有序列表或編號列表 (ol)
在HTML中，有序列表中的所有列表項預設情況下都用數字而不是專案符號標記。HTML中的有序列表以<ol>標籤開頭，以</ol>標籤結束。列表項以<li>標籤開頭，以</li>標籤結束。
描述列表或定義列表 (dl)
HTML描述列表或定義列表中的列表項像字典或百科全書一樣組織。描述列表中的每個專案都有一個描述。描述列表可用於顯示諸如詞彙表之類的專案。要建立描述列表，您需要以下HTML標籤
<dl> (定義列表)標籤
<dt> (定義術語)標籤
<dd> 標籤 (定義描述)
</dl> 標籤 (定義列表)
列表樣式型別
list-style-type指定將在列表中使用的列表項標記的型別。標記的顏色將與應用於它的元素的計算顏色相同。只有少數元素（<li>和<summary>）的預設值為display: list-item。
另一方面，list-style-type屬性可以應用於任何其顯示值設定為list-item的元素。此外，由於此屬性是繼承的，因此可以將其設定在父元素（通常為<ol>或<ul>）上以應用於所有列表項。以下是語法：
list-style-type: value;
list-style-type屬性有很多值，其中一些包括disc、circle、decimal、square、Hebrew、lower alpha、upper alpha等。
為了使用自定義值（如短劃線），我們可以使用CSS屬性。在本教程中，我們將使用某些CSS偽元素和屬性建立帶有短劃線的無序列表。
使用CSS的“:before”偽元素
CSS **偽元素**是新增到選擇器中的關鍵字，允許您設定所選元素的特定部分的樣式。以下是語法：
selector::pseudo-element {
property: value;
}
在CSS中，**::before**建立一個偽元素，它是所選元素的第一個子元素。它經常與content屬性一起使用，為元素新增裝飾性內容。預設情況下，它是內聯的。
CSS **content屬性**用生成的value替換元素的value。用content屬性插入的物件將被替換為匿名元素。它通常與**:before**和:after偽元素一起使用。
如果我們想要一個用短劃線而不是專案符號樣式化的無序列表，我們可以使用帶有content屬性的CSS **:before**偽元素。
示例
下面的示例透過將list-style-type設定為none，並使用:before偽元素以及content屬性來建立帶有短劃線的列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Create a List With Dashes in HTML?</title>
<style>
ul {
list-style-type: none;
color:darkslateblue;
}
ul li:before {
content: '\2013';
position: absolute;
margin-left: -15px;
}
</style>
</head>
<body>
<p>Famous Celebrities</p>
<ul>
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
在上面的示例中，2013用作短劃線的十六進位制程式碼點。
示例
此特定示例透過使用**‘text-indent’**屬性建立具有縮排列表效果和短劃線的無序列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Create a List With Dashes in HTML?</title>
<style>
ul {
margin: 10px;
}
ul.dash {
list-style-type: none;
}
ul.dash > li {
text-indent: -20px;
}
ul.dash > li:before {
content: "-";
text-indent: -20px;
}
</style>
</head>
<body>
<p>Famous Celebrities</p>
<ul class="dash">
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
5K+ 瀏覽量
