css - Change color of bullets in a list -
is there modern css solution change color of bullets?
it should work types of bullets.
disc style
decimal style
etc.
list looks this:
<ul> <li>lorem ipsum dolor sit amet</li> <li>lorem ipsum dolor sit amet</li> </ul> i can't change markup.
please don't give solutions this:
<ul> <li><span>lorem ipsum dolor sit amet</span></li> <li><span>lorem ipsum dolor sit amet</span></li> </ul> li { color: red; /* bullet color */ } li span { color: black; /* text color */ } this requires markup change
or
li:before { content: "• "; color: red; } this works 1 list style type
the css3 specs define ::marker pseudo-element want. but, of today, no browser supports option.
firefox has similar element, of course browser-specific:
li::-moz-list-bullet { color: red; } so practically: no, there no such solution problem right now. usually, either use span or :before suggested yourself, already.
edit: numbered lists, do:
<head> <style type="text/css"> li:before { content: counter(counter) ". "; color: red; } li { list-style-type: none; counter-increment: counter; } </style> </head> <body> <ul> <li>test</li> <li>test</li> </ul> </body> edit 2: solution attr(data-bullet):
<head> <style type="text/css"> ul.custom { list-style: none; } ul.custom li:before { display: inline-block; content: attr(data-bullet); color: red; width: 30px; } </style> </head> <body> <ul class="custom"> <li data-bullet="a">item 1</li> <li data-bullet="b">item 2</li> <li data-bullet="ba">item 3.1<br/> </ul> </body>
Comments
Post a Comment