change html li tag bullet color in css
Question
I want to change the HTML li tag bullets color with CSS, is that possible?
<html> <head> <title>change li tag bullets color</title> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
2 answers
solution1
0 ACCPTED 2022-05-31 15:42:02
I would recommend diving into the CSS to do this. Like you could do something like this:
CSS
ul {
list-style: none; /*removes the default bullets*/
}
ul li::before {
content: "(find a bullet from online and copy/paste it here)";
color: "(whatever color you want)";
font-weight: "(if you want it to be bold or italicized)";
display: inline-block; /*for spacing purposes*/
width: 1em; /*Also for spacing but you can change it to whatever*/
margin-left: -1em; /*Also for spacing*/
}
solution2
0 2022-05-31 16:55:15
<html> <head> <title>change li tag bullets color</title> <style> ul li::before { content: "\2022"; color: red; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change li bullet color in js
Include the CSS bullet along the <LI> tag
Change the color of a bullet in a html list?
css change color after particular HTML tag
Change the color of “a” tag inside of “li”
remove HTML and show bullet instead of li tag in Android
How to change a <li> bullet icon when hovering on a tag in it?
Change UL LI bullet points only in text - Wordpress - CSS
CSS to recreate LI with bullet, but without using a LI
css / html - remove space before li tag
Related Tags