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?

Solution 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/

Solution 2

You could do something like this:

h1:before {
    content:"• ";
}

See Fiddle :

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

Solution 3

You can use pseudo-selector :before to add anything what you want before your tag.

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

Solution 4

Give a class name to the paragraph or any element and apply the below code (I have given class name as bullet):

.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}

Solution 5

Something like this should work

h1, h2, h3 {
  background: url("the image link goes here") 0 center no-repeat;
  padding-left: 15px; /* change this to fit your needs */
}

View more solutions

Comments

[Sablefoste]

But does this work with an image? I tried editing your fiddle, but it doesn't seem to work with the background image.

[sinisake]

You can easily add background image...but, why would you do it, you can get pretty fine bullets from css: jsfiddle.net/6kt8jhfo/1

[Sablefoste]

I tried, and forgot to change the background to content after doing so, it works! I wanted to get the image, to promote custom branding on my website. Thanks for the solution!

[Sablefoste]

Interesting, and good points. I already had managed this through vertical-align and padding-right, but I like your methods semantically. +1!

[Asuka165]

Not only ul and ol. Like @John Slegers 's mentioned in his answer, any element with display: list-item will also able to use list-style style.

[sol]

This is a much cleaner method than using pseudoelement. +1

[Matt]

You can also use content: "\2022";, which is hexcode for bullet. Be sure to add in something like margin-right: 1em; to give it nice spacing.

[Sablefoste]

This does NOT address my original question. I wanted the CSS to do the heavy lifting. Otherwise, I would have a lot more editing to do for every bullet point. This solution is similar to my original plan, which was to use a <span class='bullet'></span> in front of the bullet. The best recommendation is @John's solution (which I accepted).

[Arvo Bowen]

I like to account for the wrapping text to show an indent by doing something like h1 {text-indent: -15px; padding-left: 20px;} adjusting the values to suit your needs.

[Ryan]

developer.mozilla.org/en-US/docs/Web/CSS/list-style-type says you can even do list-style-type: "\1F44D"; // thumbs up sign

[Cybernetic]

Would be great is this worked for multiple lines, instead of forcing them into a single line.

[John Slegers]

@Cybernetic : What do you mean? Can you please elaborate?

[Cybernetic]

@JohnSlegers as in creating a bulleted list

[John Slegers]

@Cybernetic : I think I figured out what you meant & updated my answer.