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, 2022 in CSS by Edureka
• 13,620 points
686 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, 2022 by Edureka
• 12,690 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

Aug 18, 2022 in CSS by Edureka
• 13,620 points
816 views
0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
3,595 views
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, 2022 in CSS by Edureka
• 13,620 points
284 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, 2022 in CSS by Edureka
• 13,620 points
194 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, 2022 in HTML by Tejashwini
• 3,820 points
159 views
0 votes
1 answer

Color names allowed in HTML/CSS

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

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
273 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, 2022 in CSS by Edureka
• 12,690 points
1,397 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, 2022 in CSS by Edureka
• 12,690 points
306 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, 2022 in CSS by Edureka
• 12,690 points
3,179 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP