Question

我知道我可以只使用一张图片，但是他们心智的想法真的想要吗？

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

我可以使用:before选择器轻松完成此操作。（是的，我知道ie7，幸运的是我没关系）。

e.g。

.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;
}

我遇到的问题是我的list-item中的内容现在将包含: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微调子弹定位以完成。

以下是一个例子：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

防止在选择器内容之前包装内容：

1 个答案: