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
• 12,880 points
328 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
• 11,450 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
• 12,880 points
457 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
• 11,450 points
2,063 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
• 12,880 points
102 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
• 12,880 points
67 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,470 points
60 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
• 11,450 points
85 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
• 11,450 points
670 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
• 11,450 points
97 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
• 11,450 points
700 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