我知道我可以使用图像来实现这个目的,但是谁会真正想要这样做呢?
我正在尝试找到一种简洁的方法来改变无序列表中列表项前缀的颜色。
我可以很容易地使用:before
选择器来实现这一点。(是的,我知道ie7的问题,幸运的是它不重要)。
例如:
.ul1 li
{
list-style-type:none;
}
.ul1 li:before, .ol1 li:before
{
content:"\25CF"; /*escaped unicode coloured circle*/
color:#F68A39;
font-weight:bold;
font-size:18px;
text-align:right;
padding-right:6px;
width:10px;
}
我的问题是,列表项中的内容现在会围绕着:before
的内容进行换行。是否有避免这种情况发生的方法?
以下是一些初始标记代码... 谢谢!
<ul class="ul1">
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived
not only
</li>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived
not only
</li>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived
not only
</li>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived
not only
</li>
</ul>