How to use hex value for bullet in CSS [duplicate]

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/

Why do you use a table? And note self-closing span elements won't work in HTML, only in XHTML. — Oriol
– Oriol, Commented May 29, 2015 at 16:46

Praveen Kumar Purushothaman · Accepted Answer · 2015-05-29 16:40:58Z

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>

j08691 · Accepted Answer · 2015-05-29 16:40:12Z

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>

Dmitriy · Accepted Answer · 2015-05-29 16:45:27Z

0

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>

answered May 29, 2015 at 16:40

3,9093 gold badges31 silver badges41 bronze badges

2 Comments

Note <span/> will work in XHTML, so it's not necessarily wrong.

yes you are right, but it is a bad practice

Oriol · Accepted Answer · 2015-05-29 16:49:30Z

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>

Thanks All. All the answers above seems to be working..yes, I will change the self closing span..thanks for pointing out