如何在訂購的HTML列表中強調羅馬數字

Question

我正在開發前端項目，並且需要顯示某些標題的有序列表。但我的客戶需要顯示下劃線，覆蓋率<li> 風格類型和標題的羅馬數字，這是該網頁我的html代碼：

<ol type="I"> 
 
    <li><span>Non-Canadian Investors</span>// this is my heading that needs to be underline with roman number also 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
</ol>

我需要顯示在李塊中的一些文字以及這就是爲什麼我使用<p>標記和<span>標記爲下劃線的目的

Answer 1

這樣的事情？

ol{ 
 
    list-style-position: inside; 
 
} 
 
li{ 
 
    position: relative; 
 
} 
 
.underlined{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0px; 
 
    border-bottom: 1px solid; 
 
    margin: 0px; 
 
} 
 
.underlined span{ 
 
    padding-left: 25px; 
 
} 
 
.text{ 
 
    padding-left: 25px; 
 
}

<ol type="I"> 
 
    <li> 
 
     <p class="underlined"><span>some underlined text</span></p> 
 
     <p class="text">some text</p> 
 
    </li> 
 
    <li> 
 
     <p class="underlined"><span>some underlined text</span></p> 
 
     <p class="text">some text</p> 
 
    </li> 
 
    <li> 
 
     <p class="underlined"><span>some underlined text</span></p> 
 
     <p class="text">some text</p> 
 
    </li> 
 
</ol>

Answer 2

您可以使用

.list { 
 
    counter-reset: my-badass-counter; 
 
} 
 
.list dt{ 
 
    border-bottom: 1px solid red; 
 
} 
 
.list dt:before { 
 
    content: counter(my-badass-counter, lower-roman); 
 
    counter-increment: my-badass-counter; 
 
    padding-right: 10px; 
 
}

<dl class="list"> 
 

 
\t <dt>list head 1</dt> 
 
\t <dd>list data 1</dd> 
 
\t 
 
\t <dt>list head 2</dt> 
 
\t <dd>list data 2</dd> 
 
\t 
 
\t <dt>list head 3</dt> 
 
\t <dd>list data 3</dd> 
 

 
</dl>

Answer 3

髒技巧是使用CSS計數器，然後絕對位置計數器（放在::before`` pseudo-element). To force the underline to extend towards the text, you will have to insert an arbitrary amount of whitespace, in this case I use the em space, represented as內\ 2003` in unicode。

這個技巧的工作原理如下：它支持多行內容，請參閱下面的概念驗證示例。另外，我已經選擇使用不同的顏色櫃檯文本只是這樣顯示的視覺效果：

ol { 
 
    counter-reset: listCounter; 
 
    list-style: none; 
 
} 
 
ol li { 
 
    padding-left: 2rem; /* Some arbitrary spacing */ 
 
    position: relative; 
 
} 
 
ol li::before { 
 
    color: #ff0000; 
 
    counter-increment: listCounter; 
 
    content: counter(listCounter, upper-roman) "\2003\2003\2003"; 
 
    display: inline-block; 
 
    text-decoration: underline; 
 
    position: absolute; 
 
    left: 0; 
 
    max-width: 2rem; /* Must match the left padding above */ 
 
    overflow: hidden; /* Hide overflowing underline */ 
 
} 
 
ol li span { 
 
    text-decoration: underline; 
 
}

<ol type="I"> 
 
    <li><span>Non-Canadian Investors</span> 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
    <li><span>This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title</span> 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
</ol>

Answer 4

如果您還想強調的文本，然後只需添加文本裝飾：下劃線;治以.custom櫃檯裏 可以實現這樣理想的結果：

.custom-counter { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.custom-counter li { 
 
    counter-increment: step-counter; 
 
    margin-bottom: 10px; 
 
} 
 

 
.custom-counter li::before { 
 
    content: counter(step-counter, upper-roman); 
 
    text-decoration: underline; 
 
    padding: 3px 8px; 
 
}

<ol class="custom-counter"> 
 
    <li><span>Non-Canadian Investors</span>// this is my heading that needs to be underline with roman number also 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
</ol>