74

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?

0

10 Answers 10

116

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 of that element to list-item. Optionally, you can also set list-style-type (default : disc) and list-style-position (default : outside) attributes to modify the behavior / look-and-feel of your list item.

If your element spans multiple lines, list-style-position should be the default value outside if you want all of your lines to align to the right of your bullet point. In that case, however, it is possible you don't see your actual bullet point, as it would be to the left of the content of your element. If this happens, you can just add a left margin to move the element's content to the right, and your bullet point should show up.


EXAMPLE 1

h1 {
    display: list-item; /* This has to be "list-item"                                          */
    margin-left : 1em;  /* If you use default list-style-position 'outside', you may need this */
}
<h1>
  Your H1 text should go here. If it consists of multiple
  lines, the left alignment of all lines is the same.
</h1>
<h1>
  Here's another item.
</h1>


EXAMPLE 2

h2 {
    display: list-item;          /* This has to be "list-item"                                               */
    list-style-type: square;     /* 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 */
}
<h2>
  Your H2 text should go here.
</h2>
<h2>
  Note that, if you have multiple lines, only the first 
  line is aligned to the right of the bullet point when
  using list-style-position 'inside'. Subsequent lines
  are left aligned with the left of the bullet point.
</h2>

7
  • 1
    Interesting, and good points. I already had managed this through vertical-align and padding-right, but I like your methods semantically. +1!
    – Sablefoste
    Sep 8, 2015 at 14:50
  • This is a much cleaner method than using pseudoelement. +1
    – sol
    Jan 31, 2017 at 11:31
  • developer.mozilla.org/en-US/docs/Web/CSS/list-style-type says you can even do list-style-type: "\1F44D"; // thumbs up sign
    – Ryan
    Jan 11, 2021 at 15:42
  • Would be great is this worked for multiple lines, instead of forcing them into a single line.
    – Cybernetic
    May 6, 2021 at 2:03
  • @Cybernetic : What do you mean? Can you please elaborate? Jun 1, 2022 at 22:04
77

You could do something like this:

h1:before {
    content:"• ";
}

See Fiddle :

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

5
  • But does this work with an image? I tried editing your fiddle, but it doesn't seem to work with the background image.
    – Sablefoste
    Aug 16, 2015 at 21:02
  • You can easily add background image...but, why would you do it, you can get pretty fine bullets from css: jsfiddle.net/6kt8jhfo/1
    – sinisake
    Aug 16, 2015 at 21:07
  • 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
    Aug 16, 2015 at 21:08
  • 18
    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.
    – Matt
    Jun 2, 2017 at 15:10
  • 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.
    – Arvo Bowen
    Dec 3, 2018 at 19:18
12

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

h1:before {
    content: "- "
}
<h1>My H1 text here</h1>

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%;
}
3

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 */
}
3

If you want to adjust dot size, color and position you can do this:

 .bullet:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    background-color: #29cf00;
    vertical-align: middle;
}
0

list-style-type is reserved for ul only. You can use <h1 class="bullet"> with pseudo-element :before.

0

The very simple way to create a bullet using the before css is to utilize the font family ... this way there is no need to include any graphics and etc.

here is the class code:

.SomeClass:before {
  font-family: "Webdings";
   content: "=  ";

{

-1

Nope, list-style and list-style-image are only for ul and ol tags you'll have to get back to your first method or make something with js

http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/cssref/pr_list-style-type.asp

1
  • 1
    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.
    – Asuka165
    Jun 30, 2016 at 20:38
-2

Just use <p>&bull; </p>to create a dot in front of your word

1
  • 5
    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).
    – Sablefoste
    Jul 26, 2017 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.