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


Tags: css,css3,layout,colors,html-lists

Problem :

This question already has an answer here:

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then everything becomes red!

While I ONLY want to set the color of the square bullets. Is there an elegant wat to define only the color of the bullets in CSS without using any sprite images nor span tags?

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}


Solution :

The most common way to do this is something along these lines:

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

Live demo: http://jsfiddle.net/leaverou/ytH5P/

Will work in all browsers, including IE from version 8 and up.


    CSS Howto..

    How to menu on one line and always in center?

    Using only CSS, show div on hover over

    How to fix text running off screen and breaking layout without using CSS word-break property?

    Show Loading gif on hover

    How to I center my submit button in CSS?

    How can I make DIVs within a display: table-cell fill the cell?

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?

    How do I make this lightbox I am creating only open on the div I am clicking?

    How to get the current year using css?

    how to change style of element when click on anchor

    How can I add a pulse animation to a div in an array of divs, in Javascript?

    How to center a relative div in my case?

    How can I prevent my li's from going below my menu even if there is no room?

    How to position absolute in scrollable area? (Css)

    How to get messages column up on the right?

    css google font how to download and embedd in css to avoid slow load times

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    How to use the plus sign process of css selectors in LESS?

    How to force Jade not to indent block tag?

    How to use the native browser outline in CSS?

    How can I make a span stretch the available space between to other spans?

    How to add modal window parameters for this code?

    How to modify programmatically with javascript the css ::before and ::after [duplicate]

    How To Use CSS To Style The Output Of JavaScript

    How does Media Queries Reacts

    How to set background url for css files in thymeleaf?

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    How to restrict pasting text in an input text field in html

    How to give the padding for option with css only

    css - why my text box is not showing up?