html - 添加颜色 block 作为 <li> 元素符号

Question

我想将无序列表中的元素符号点更改为扩展列表项整个深度的颜色 block ，即使列表项跨越多行。单个列表项的所有换行需要缩进相同的深度。

我要寻找的最终效果是在列表的一侧下方有一条彩色长线

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

这是我当前的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/