CSS List Styling

HTML & CSS
1

Good afternoon,

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.

Thx.

2

this should do it:

<!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)

hope that helps

3

Very clever, Ray. :magic:

I’ve wished for something like this, too. :slight_smile:

Thanks!

4

Thanks! This works for me.

5

You will need clear:left on the list or it will snag and staircase :slight_smile:


.tlist li {
 list-style:none;
clear:left; 
}