如何在CSS中使用子弹的十六进制值


How to use hex value for bullet in CSS

本问题已经有最佳答案,请猛点这里访问。

我正在尝试使用十六进制值作为CSS中的项目符号,如这里所述可以在css"content"属性中使用HTML实体吗?

注意,我不想使用

  • 元素来显示项目符号。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table>
        <tr>
            <td>
                <span class="mybullet"/> Link1
            </td>        
        </tr>
    </table>

    .mybullet
    {
        content:"\2022";
        color:#f00;
    }

    但是它不起作用。这是J小提琴http://jsfidle.net/kq2fzb2v/


    使用:before:after

    1
    2
    3
    4
    5
    6
    .mybullet:before
    {
        content:"\2022";
        color: #f00;
        display: inline-block;
    }

    1
    2
    3
    4
    .mybullet:before {
      content:"\2022";
      color: #f00;
    }
    1
    2
    3
    4
    5
    6
    7
    <table>
      <tr>
        <td>
          <span class="mybullet" /> Link1
        </td>
      </tr>
    </table>


    content属性仅适用于::before::after伪元素:

    4

    1
    <span class="mybullet">Link1</span>

    或者,即使您不想使用li元素,也可以将其作为列表项:

    1
    2
    3
    4
    .mybullet {
      display: list-item;
      list-style: inside disc;
    }
    1
    <span class="mybullet">Link1</span>


    使用:before:after

    1
    2
    3
    4
    5
    6
    .mybullet:before
    {
        content:"\2022";
        color:#f00;
        display: inline-block;
    }
    1
    2
    3
    4
    5
    6
    7
    <table>
        <tr>
            <td>
                <span class="mybullet"> Link1</span>
            </td>        
        </tr>
    </table>


    您需要在代码中添加::before伪元素:

    1
    2
    3
    4
    .mybullet::before {
        content:"\2022";
        color:#f00;
    }
    1
    2
    3
    4
    5
    6
    7
    <table>
        <tr>
            <td><span class="mybullet" /> Link1

            </td>
        </tr>
    </table>