css - 防止围绕 :before selector content 的内容换行

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>

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>