如何用hss在html中对低级罗马有序列表样式进行着色？

Question

获得像下面的示例图像一样简单的工作,证明是非常困难的.我的挫折感来自这样的事实:经过这么多年,仅使用html/css仍然不可能轻松实现这一点,这就是我想要的!我想要一个带有彩色罗马式子弹的有序列表!并且将文本整齐地放在一起,就像下面的例子一样.我已经尝试了很多小提琴,但我不能让它看起来像我下面的图像一样整洁.任何线索如何改善这一点？

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占位符文本时,突然间我的想象力开始了......

---

---

什么需要:

1. 实现罗马字母和li文本之间的适当差距.成功!
2. 添加罗马字母的左对齐或右对齐
3. 让下一条线条整齐排列.成功!

Answer 1

我希望我理解正确.您已经将列表类型着色,因此唯一的问题是对齐？

掉落text-indent在和留有余量li,并添加负margin-right的li:before:

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;
}

更新小提琴