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.
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:
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:
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!
