How to set Bullet colors in UL LI html lists via CSS without using any images or span tags

0 votes

Consider a list with some <li> items that isn't sorted. Now, I've declared the bullets to be square shaped using list-style:square; however, if I use colour: #F00; for the <li> items, everything turns red!

I'm solely interested in changing the colour of the square bullets. Is there a simple way to define the colour of the bullets in CSS that doesn't include sprite images or span tags?

May 26 in CSS by Edureka
• 7,940 points
29 views

1 answer to this question.

0 votes

I use jQuery for this:

jQuery('li').wrapInner('<span class="li_content" />');

& with some CSS:

li { color: red; }
li span.li_content { color: black; }

Perhaps excessive, but useful if you're coding for a CMS and don't want to ask your editors to insert an extra space between each list item.

answered May 27 by Edureka
• 8,820 points

Related Questions In CSS

0 votes
1 answer
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 8,820 points
25 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 8,820 points
25 views
0 votes
1 answer

How to make 3 vertical dots using CSS?

Try the following entire source code for ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,820 points
37 views
0 votes
0 answers
0 votes
0 answers

Color names allowed in HTML/CSS

what are the CSS color names, though ...READ MORE

May 27 in HTML by Tejashwini
• 400 points
7 views
0 votes
1 answer

Color names allowed in HTML/CSS

Aqua, black, blue, fuchsia, grey, green, lime, ...READ MORE

answered Jun 1 in CSS by Edureka
• 8,820 points
9 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 8,820 points
26 views
0 votes
1 answer

How to insert spaces/tabs in text using HTML/CSS

For spaces, use &nbsp;, for (less than, ...READ MORE

answered Jun 1 in CSS by Edureka
• 8,820 points
14 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 8,820 points
14 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP