html - 添加一个颜色块作为项目项目符号

Question

我想将无序列表中的项目符号点更改为扩展列表项整个深度的颜色块，即使列表项包含多行也是如此。单个列表项的所有换行都需要缩进相同的深度。

我正在寻找的最终效果是列表一侧的一条长彩色线

目前我使用的图像设置为与单个列表行相同的深度，但这显然不包括多行。它还在它们之间放置了一个小换行符，如果列表项换行，则换行的文本位于项目符号下方

这是我当前的 css

.content-main ul li {
  line-height: 1em;
  float:left;
  text-align:left;
  vertical-align:text-bottom;
  display:list-item;
  list-style-image: url('images/bullet.gif');
  list-style-position:inside;
}

对此表示感谢的任何指示

Answer 1

您必须切换到容器 ( div, span) 或类似的东西。

<div>
  first
  <div>
     second
     <div>
     third 
     </div>
  </div>
</div>

CSS：

div {border-left:1px 纯红色}

这将生成从项目到列表末尾的行。

请参阅我的 JSFiddle 示例http://jsfiddle.net/G82eQ/

编辑：再次阅读您的帖子，只为每个项目显示一行 - 导致列表左侧有一长行，请参阅http://jsfiddle.net/vENx3/