CSS HTML

How to change the bullet of lists using CSS (ul tag)

October 31, 2021

How to change the bullet of lists using CSS (ul tag)

In this post we will learn how to change the bullet of lists using CSS, and these are the unordered lists, which are represented by the <ol> tag in HTML.

change the bullet of lists using CSS cover

Hey you programmer, okay? Let’s learn something new 😀

Well, firstly, to change the style of the list, let’s create an HTML that will help you follow the example more easily and also help me explain the technique to you.

So, this will be our HTML:

<!DOCTYPE html>
 <html>
  <head>
   <title>Bullet das listas</title>
  </head>
  <body>
   <ul>
     <li>Tomar café</li>
     <li>Arrumar a cama</li>
     <li>Ir para o trabalho</li>
     <li>Estudar programação</li>
     <li>Dormir</li>
   </ul>
  </body>
</html>

In the purest of HTMLs, our code is displayed like this in the browser:

change the bullet of lists using CSS example

How to change bullet lists: CSS

Now our second step is to hide the bullets that come in standard HTML

For this we use the list-style rule with a value of none, check it out below:

ul {
list-style: none;
}

This is the expected result:

html lists without bullets

And for the grand finale, we need to use ::before in <li>, this will ensure that something is added before <li>

The ‘something before’ can be whatever we want, see an example:

ul {
list-style: none;
}
ul li::before {
content: "→";
}

Check it out the final result for our example:

In this example I put a symbol to change the bullet of the lists, but you can put anything you wish

Remembering that there is also the ::after, to insert something after! 🙂

Conclusion

In this article we learned how simple it is to change the style of bullets in lists using CSS, we can change it any way we want

This is done with the help of ::before, and also first by styling the HTML bullets, with the list-style rule and the value none

And that’s it for today, see you on the next post! 🙂

Want to learn more about HTML and CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x