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

pretty simple question, not sure if possible. want add image act bullet in <h1> elements. know can achieve 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 there automatic way same thing? thinking like:

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

but seems work <ul> elements. don't want have paste <span> element everywhere before <h1> element. ideas?

while can use :before pseudo-selector add "-" or "•" character in front of element, doesn't make element behave bullet point. element may bullet point, that's dirty hack, really, , should avoided!

to make element both (1) bullet point , (2) behave bullet point, should set display, list-style-type , list-style-position attributes of element.

---

example code

h1 {      display: list-item;          /* has "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/