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

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: "=  ";

{

Answer 2

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

Answer 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>