如何在有序HTML列表中为罗马数字加下划线

我在前端项目的工作，有一个有序的列表，显示一些标题的要求。但我的客户需要显示下划线，包括罗马数字的样式类型和标题 这是该页面的html代码：

非加拿大投资者//这是我的标题，也需要用罗马数字划线 Cce或任何人的信息

像这样的

ol{ 列表样式位置：内部； } 李{ 位置：相对位置； } .划线{ 显示：内联块； 位置：绝对位置； 左：0px； 边框底部：1px实心； 边际：0px； } .划线跨度{ 左侧填充：25px； } .文本{ 左侧填充：25px； }

一些带下划线的文本

一些文本

一些带下划线的文本

一些文本

一些带下划线的文本

一些文本

你可以用

.名单{ 计数器重置：我的坏家伙计数器； } .列表dt{ 边框底部：1px纯红； } .列表dt：之前{ 内容：对抗我的恶棍，下罗马； 计数器增量：我的坏蛋计数器； 右边填充：10px； } 表目1 列表数据1 表目2 列表数据2 表目3 列表数据3

---

一个肮脏的技巧是使用CSS计数器，然后绝对定位放置在：：before``伪元素中的计数器。要强制下划线向文本延伸，必须插入任意数量的空白，在本例中，我使用em空格，在unicode中表示为\2003`

这个技巧的作用在于它支持多行内容，请参见下面的概念验证示例。此外，我选择了使用不同颜色的计数器文本，以便显示视觉效果：

ol{ 计数器复位：列表计数器； 列表样式：无； } 欧利{ 左填充：2rem；/*一些任意间距*/ 位置：相对位置； } 奥利：以前{ 颜色：ff0000； 计数器增量：listCounter； 内容：counterlistCounter，上罗马\2003\2003\2003； 显示：内联块； 文字装饰：下划线； 位置：绝对位置； 左：0； 最大宽度：2rem；/*必须与上面的左填充匹配*/ 溢出：隐藏；/*隐藏溢出下划线*/ } 欧利斯潘{ 文字装饰：下划线； } 非加拿大投资者 Cce或任何人的信息

这是一个很长的标题这是一个很长的标题这是一个很长的标题这是一个很长的标题这是一个很长的标题 Cce或任何人的信息

---

如果你想给文本加下划线，那么只需添加文本装饰：下划线；海关柜台李 您可以实现如下所示的预期结果：

.海关柜台{ 保证金：0； 填充：0； 列表样式类型：无； } .海关柜台李{ 计数器增量：步进计数器； 边缘底部：10px； } .海关柜台李：：之前{ 内容：反步计数器，上罗马； 文字装饰：下划线； 填充：3px8px； } 非加拿大投资者//这是我的标题，也需要用罗马数字划线 Cce或任何人的信息