How TO - Change Bullet Color of Lists
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
How TO - Change Bullet Color of Lists
❮ Previous
Next ❯
Learn how to change bullet colors for lists with CSS.
Change Bullet Color
- Adele
- Agnes
- Billy
- Bob
Try it Yourself »
Step 1) Add HTML:
Create a basic list:
Example
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>Step 2) Add CSS:
By default, it is not possible to change the bullet color of a list item.
However, you can do some CSS tricks to make it possible. Note that you might
have to tweak it a bit differently if you're using a CSS framework or a special
stylesheet:
Example
ul
list-style: none; /* Remove default bullets */
ul li::before
content: "2022"; /* Add content: 2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
Try it Yourself »
❮ Previous
Next ❯