How to use hex value for bullet in CSS

Question

Im trying to use hex value for bullet in CSS as mentioned here Can you use HTML entities in the CSS “content” property?

Note that I don't want to use <li> element just to show bullet

<table>
    <tr>
        <td>
            <span class="mybullet"/> <a href="#">Link1</a>
        </td>        
    </tr>
</table>

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

however its not working. Here is the JsFiddle http://jsfiddle.net/kq2fzb2v/

Answer 1

Use either :before or :after:

.mybullet:before
{
    content: "\2022";
    color: #f00;
    display: inline-block;
}

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

<table>
  <tr>
    <td>
      <span class="mybullet" /> <a href="#">Link1</a>
    </td>
  </tr>
</table>

Answer 2

You need to add the ::before pseudo-element to your code:

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

<table>
    <tr>
        <td><span class="mybullet" /> <a href="#">Link1</a>

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

Answer 3

use :before or :after

<span/> to <span></span>

.mybullet:before
{
    content:"\2022 ";
    color:#f00;
    display: inline-block;
}

<table>
    <tr>
        <td>
            <span class="mybullet"> <a href="#">Link1</a></span>
        </td>        
    </tr>
</table>

Answer 4

The content property only applies to the ::before and ::after pseudo-elements:

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

<span class="mybullet"><a href="#">Link1</a></span>

Alternatively, even if you don't want to use a li element, you may style it as a list item:

.mybullet {
  display: list-item;
  list-style: inside disc;
}

<span class="mybullet"><a href="#">Link1</a></span>