Have Geek Brain

How to fill color inside circle shapes

How do I get red for positions shown as a circle?

/* This maps to ul */
.rich-datalist {
    list-style: disc;
    list-style-position: inside; 
    margin: 6px 0 1px 0;
    padding-left: 18px;
}

/* This maps to li */
.rich-list-item {
    padding-top: 5px;
    padding-bottom: 15px;
    font-size: 13px;
}
+2


a source to share


2 answers


One day this will be possible in CSS3, but until then the only way to move it is to wrap the contents of each LI in a different container, and style that is:

HTML:

<ul>
<li><span>lorem</span></li>
<li><span>ipsum</span></li>
<li><span>dolor</span></li>
</ul>


CSS

ul{color: red}
ul li span{color: blue}
+3


a source


The HTML bullet color is the same as the list item color property:

.rich-datalist { color: red; }


If you need a bullet of a different color than the text, the easiest way is to apply a left-aligned non-repeating bullet background and apply left padding to the list item.

.rich-datalist { 
list-style: none;
}
.rich-datalist-item { 
background: transparent url('/path/to/red-bullet.png') no-repeat left center; 
padding-left: 20px;
}
+4


a source






More articles:


All Articles