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

elements. I know I can achieve this b

Answer 1

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

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

Answer 2

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 3

You could do something like this:

h1:before {
    content:"• ";
}

See Fiddle :

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

Answer 4

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

Answer 5

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/

Answer 6

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