如何仅使用 css 在 html 中对小罗马有序列表样式进行着色？

Question

事实证明，要使像下面的示例图片这样简单的东西起作用是非常困难的。我的沮丧来自于这样一个事实，即经过这么多年，仅使用 html/css 仍然无法轻松实现，这正是我想要的！ 我想要一个带有彩色罗马式项目符号的有序列表！ 并按照下面的示例将文本整齐地放在一起。我在 fiddle 上做了很多努力，但我无法让它看起来像我下面的图片那样整洁。有什么改进方法的线索吗？

ol{
 counter-reset:item;
 list-style:none;
}
ol li:before{
 content: counter(item, lower-roman) "."; color: #4000ff;
 counter-increment: item;
 position: absolute;
 text-align: right;
 padding-right: 4px;


}ol li{
 text-indent: -20px;
 margin: 4px 0 0 17px;
}

http://jsfiddle.net/MEBxA/89/

PS 当我在indesign中写一些abcd占位符文本时，突然间我的想象力起飞了...

需要什么：

在罗马字母和li文本之间实现适当的差距。成功！
添加罗马字母的左对齐或右对齐
让下一行整齐地对齐。成功！

Answer 1

希望我理解正确。您已经将列表类型着色，所以唯一的问题是对齐？

删除 text-indent 和 li 上的左边距，并在 li:before 上添加负数 margin-right:

ol li:before{
 content: counter(item, lower-roman) "."; 
 color: #4000ff;
 counter-increment: item;
 position: absolute;
 text-align: right;
 margin-left: -30px;
}
ol li{

 margin: 4px 0 0 0;
}

Updated Fiddle

如何仅使用 css 在 html 中对小罗马有序列表样式进行着色？

How to COLOR lower-roman ordered list style in html with just css?

html

css

layout

list