Text values for list-style-type CSS property, how?
Solution 1
To my knowledge, it's not possible to do that using the list-style-type property.
However, if your browser supports the :before CSS selector, you can use it to insert the bullet entities before the list items. You only need to convert the entity code to hexadecimal:
ul {
list-style-type: none;
}
li:before {
content: "\25ba\00a0";
}
You can find a jsFiddle demonstrating this here.
Solution 2
@Frederic shows an interesting workaround that I would go with, unless you have to support IE6 and 7 - in that case, you'd have to work around with a normal HTML element that contains the character, and that you style to put it into the right place.
Something like
ul { list-style-type: none } /* Adjust margin and padding as you see fit */
ul li div.bullet { float: left; width: 30px; margin-right: 12px }
<li>
<div class="bullet">►</div>
List item 1
</li>
Solution 3
If you use the :before method to get your list-style think about adding a padding to the list and a negative margin to the list-element to get the same space at line-break:
ul {
list-style: none;
padding: 0 0 0 24px
}
ul > li:before {
content: '\25BA';
float: left;
margin-left: -24px
}
Just use the example postet from thirtydot to try in jsfiddle
Solution 4
It took a while, but list-style-type: <string>
has arrived in Chromium.
Allows a stylesheet to use an arbitrary character for the list style marker.
Related videos on Youtube
Paolo
Enthusiast software developer. Self reminders I'm here to learn. Learning is an experience, everything else is just information. (A.Einstein)
Updated on June 04, 2022Comments
-
Paolo almost 2 years
I'd like to customize the way items of unordered lists are presented.
I know I can use
list-style-type
to change betweennone
,disc
,circle
,square
and other more or less supported values. I also know it is possible to change the default appearance of list markers specifying an image tolist-style-image
property.The problem is that I want to replace the bullet with
large right arrow
(►,►
) HTML special character instead of use a combination oflist-style-image
and a triangular image.Is it possible? Btw, if this matters jQuery is already loaded on the page so it wouldn't be a problem to use it if this can help.
-
thirtydot about 13 yearsI was working on something similar myself. I won't bother to post an answer now, here's where I got to: jsfiddle.net/thirtydot/ZTKuS
-
clairesuzy about 13 years+1 beat me to it, a handy conversion calculator for those entities can be found here
-
Pekka about 13 years+1 this won't work in IE6 and 7 but if that's not a necessity, it's a very nice workaround.