髒技巧是使用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>