我正在从事前端元素,需要显示一些标题的有序列表。但我的客户需要在 <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>
我也需要在 li block 中显示一些文本,这就是我使用 <p>
的原因标记和 <span>
用于下划线目的的标签
最佳答案
如果你还想给文本加上下划线,那么只需添加 text-decoration: underline;规则.custom-counter li 您可以像这样获得预期的结果:
.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>
关于html - 如何在有序的 HTML 列表中为罗马数字加下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42905942/