帶星號的列表項

是否可以在有序列表中增加星號？所以，如果我有像帶星號的列表項

<ol class="ast"> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
</ol>

會出現在我的網頁上進行如下

* 項目1
** 項目2
***項目3

使用CSS？

來源

2013-03-01 Wokoman

什麼是asterix？你的意思是星號嗎？ – j08691 2013-03-01 17:14:38

你可以，但你不得不取消樣式列表（list-style:none）並使用「before：」僞類來絕對定位你的星號，並結合n-th子設置星號的數量。

就像這樣，但你必須稍微調整一下。

ul, li { 
    margin:0; 
    padding:0; 
    list-style:none  
} 

li { 
    padding-left:20px; 
} 

li:nth-child(1):before { 
    content: "*" 
} 

li:nth-child(2):before { 
    content: "**" 
}

來源

2013-03-01 17:22:47

因此，如果有100個項目，你需要100個內容：「*」規則？不妨跳過CSS並在HTML中對其進行硬編碼。 – j08691 2013-03-01 17:30:04

您可以隨時使用JavaScript進行操作。 – 2013-03-01 18:28:54

不夠公平，但我最多有5個，所以這樣做是可行的。 – Wokoman 2013-03-01 19:21:44

我不相信有一種方法可以處理它的任意深度。 Diodeus的解決方案將以很多CSS代碼爲代價來處理已知的最大深度。

來源

2013-03-01 17:30:53 Gus

CSS symbols()函數允許您創建類似於您要查找的內容。

請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/symbols。

一個例子是風格類似的列表：

ol { 
    list-style: symbols(symbolic "*"); 
}

雖然上面的代碼自動遞增，每次每個<li>星號，你想要什麼樣的數量，星號的數量增長到左邊，而不是來像你之後的權利。另外，一旦你通過了一定數量的列表項，星號的數量將超出你的可用空白區域。 See this demo for an example of this problem。

另外，symbols()目前僅在FireFox版本35或更高版本中受支持。

來源

2015-04-06 18:39:17

帶星號的列表項

回答

相關問題