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
• 10,120 points
48 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
• 9,540 points

Related Questions In CSS

0 votes
0 answers

how to draw a rectangle in HTML or CSS?

I am trying to draw a rectangle ...READ MORE

7 hours ago in CSS by Edureka
• 10,120 points
2 views
0 votes
1 answer
0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30 in CSS by Edureka
• 10,120 points
23 views
0 votes
0 answers

How to line-break from css, without using <br />?

How to achieve the same output without <br>? <p>hello ...READ MORE

Jul 22 in CSS by Edureka
• 10,120 points
10 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
• 1,760 points
16 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
• 9,540 points
13 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
• 9,540 points
82 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
• 9,540 points
26 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
• 9,540 points
20 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