Can I use CSS to add a bullet point to any element?

Question

Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1> elements. I know I can achieve this by:

<span class='bullet'></span><h1>My H1 text here</h1> 

with css:

.bullet{     background: url('bullet.png') no-repeat;     display:inline-block;     vertical-align: middle;     background-size:100%;     height:25px;     width:25px;     margin-right: 5px; } 

but is there an automatic way to do the same thing? I was thinking something like:

h1{     list-style-image: url('bullet.png'); } 

but that only seems to work with <ul> elements. I really don't want to have to paste the <span> element everywhere before the <h1> element. Any ideas?

Answer 1

While you can use a :before pseudo-selector to add a "-" or "•" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!

To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display, list-style-type and list-style-position attributes of that element.

---

EXAMPLE CODE

h1 {     display: list-item;          /* This has to be "list-item"                                               */     list-style-type: disc;       /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type     */     list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */ }

<h1>My H1 text here</h1>

---

THE FIDDLE

http://jsfiddle.net/L15a53cb/

Answer 2

You could do something like this:

h1:before {     content:"• "; } 

See Fiddle :

http://jsfiddle.net/6kt8jhfo/6/