带有 :before 的自定义列表项目符号

Posted 2023-03-06

【中文标题】带有 :before 的自定义列表项目符号

【英文标题】：Custom List Bullets with :before

【发布时间】：2012-11-28 01:53:02

【问题描述】：

我正在创建一个包含以下部分的表单：

我对活动和对象部分的方法是使用列表创建这些选项。

<div class="formBlock">
    Activities
    <ul id="coloringAct">
        <li>Activity Type A</li>
        <li>Activity Type B</li>
        <li>Activity Type C</li>
    </ul>
</div>

我希望能够使用自定义列表样式（不是图像）或使用 :before 选择器来创建彩色块，就好像它们是列表中的项目符号一样。本质上是这样的：

#formTable tr td .formBlock li 
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid #DDD;

#formTable tr td .formBlock li:before 
    content: "";
    width:20px;
    height:20px;
    background:red;

如何使用 CSS 来完成这项工作？这不起作用。

HERE'S A FIDDLE.

【参考方案1】：

稍微调整一下：

formTable tr td .formBlock li:before 
    content: "";
    width:20px;
    height:20px;
    background:red;
    display: block;
    float: left;
    margin-right: 5px;

为什么？

display:block 让你看到方块

float: left 避免它在下一行发送文本

margin-right：避免文字太靠近正方形

您必须进行很多调整以适应您的风格和情况 :) 但关键元素是缺少“显示块”

【讨论】：

这就是我想出来的！感谢您的回答。我会给你一个赞成票:)

谢谢 :) 与我有一个公认的答案相比，你最好弄清楚事情，呵呵 :)

【参考方案2】：

我想出了解决办法。显然我有正确的代码，但我需要做的就是添加

display:inline-block;

以下是正确的：

    .formBlock 
        float:left;
        background-color:#f5f5f5;
        padding:0px 10px 0px 10px;
        color:#627686;
        line-height:32px;
        overflow:hidden;
        width:150px;
        border-radius:5px;
        margin-right:15px;
      
    .formBlock li 
        list-style:none;
        margin:0;
        padding:0;
        border-top:1px solid #DDD;
    
    .formBlock li:before 
        display:inline-block;        
        content: "";
        width:10px;
        height:10px;
        background:red;    
        margin-right:5px;            
    ​