How to put a bullet beside the heading elements as

问题:

I'm using CSS and attempting to get what looks like a bullet point in the headings:

This is the exact image I want.

What I've done :

h1,h2,h3 {
    background-image: url("the image link goes here");
}

anyone get any ideas I've tried moving it and stuff but it just isn't happening. Cheers.

回答1:

You should set the background-position as well and also a left padding for the heading elements to push the text to the right:

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

Note that I used the background property as a shorthand.

You can also achieve that by using ::before pseudo-element to create the rectangle and position that within the headings as follows:

h1:before,
h2:before,
h3:before {
  content: '■ ';
    position: relative;
    bottom: .1em;
    color: #666;
}

WORKING DEMO