html - 如何在有序的 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>

我也需要在 li block 中显示一些文本，这就是我使用 <p> 的原因标记和 <span>用于下划线目的的标签

Answer 1

如果你还想给文本加上下划线，那么只需添加 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>