I want to add a CSS right-facing triangle as the “bullet” in each list item:
i.e.
<ul>
<li><a href="">[triangle] Text (12px)</a></li>
<li><a href="">[triangle] Text (12px)</a></li>
<li><a href="">[triangle] Text (12px)</a></li>
<li><a href="">[triangle] Text (12px)</a></li>
</ul>
I would like the triangle to be as crisp as possible and change color on hover with the text.
I can do this with an image but I was hoping to do something purely CSS-based.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.tlist li {
list-style:none;
}
.tlist li:before{ content:'\\25B6'; float:left; font-size:60%; margin-top:.6em; margin-right:1em; margin-left:-1em}
.tlist li:hover:before{color:red;}
.tlist li a{ overflow:hidden; display: block;}
</style>
</head>
<body>
<ul class="tlist">
<li><a href="">Text (12px). much longer text much longer text much longer text much longer text much longer text </a></li>
<li><a href="">Text (12px)</a></li>
<li><a href="">Text (12px)</a></li>
<li><a href="">TText (12px)</a></li>
</ul>
</body>
</html>
I have oft wished there was a way to slect a custom list marker in CSS, but there simply isn’t one. So we do the next est thing by using the :before pseudo element and some special character codes ( \25B6 = solid right triangle)