防止内容环绕 :before 选择器的内容

Question

我知道我可以使用图像来实现这个目的，但是谁会真正想要这样做呢？

我正在尝试找到一种简洁的方法来改变无序列表中列表项前缀的颜色。

我可以很容易地使用: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>

- James South

Answer 1

您可以通过将:before内容绝对定位到li元素，然后在li元素上应用边距或填充来实现。使用top、left、right和/或bottom微调项目符号的位置即可完成。

以下是一个示例：

.ul1 li
{
    list-style-type:none;
    padding-left: 16px;
    position: relative;
}

.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;
    position: absolute;
    left: 0;
    top: -0.2em;
}

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

- Brent

---

一个精彩的回答！非常感谢你。 - James South

不要忘记在li（父容器）上应用position:relative，否则:before可能会飞走。 - 2046