I found an article on the list-style-type property in CSS, but it doesn't list the · (·) as an option, as opposed to the default disc
or • (•). Is there a way to do this with HTML or CSS?
-
15obligatory w3fools reference – zzzzBov Nov 18 '11 at 1:18
-
2doesn't mean they aren't useful for references – steveo225 Nov 18 '11 at 1:22
-
4@stevo225, I used to like w3schools once upon a time, but then i discovered that reading the specifications was actually very easy and that w3schools is wrong too often for me to ever trust it. If I can't trust it as a source, it ceases to be useful in any meaningful way. – zzzzBov Nov 18 '11 at 1:24
-
1But why use the fools when the real W3 references are so much better? – mu is too short Nov 18 '11 at 1:26
-
1@steveo225, the specification is the document that defines how the language must work. For particular browser implementations you can use quirksmode's compatibility tables as an accurate reference. – zzzzBov Nov 18 '11 at 1:28
CSS (works in any browser supporting :before
and content:
):
li:before {
content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
list-style:none;
text-indent:-.5em; /* helps make it look more like it's a bullet. */
}
Caution: It is not a real list style. Therefore, when you have wrapped lists, it will look funny. This can perhaps be mitigated by a negative text-indent of a few units to get it to function more like a list-style.
Another implementation:
li:before {
content: '\b7\a0';
position:absolute;
right:100%
}
li {
list-style:none;
position:relative;
}
This version seems to work better. I often use :before
and :after
to add extra things like borders, but if you are adding a bullet I imagine that that is not the case. Even though this is the alternate suggestion, it is probably the preferred one.
Yes! You can use the before
pseudo-class to insert the character before each item.
.DotList li:before
{
content: "·";
}
Here is an example jsFiddle.
list-style-type
doesn't select what character to use, it selects an abstract marker to use. Note the standard states:
The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems.
Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent.
For more control over the marker, you must either set an image using list-style-image
or use the :before
pseudo element and content
property, setting the list-style-type
to 'none'. :before
and the content
property aren't supported in IE 7 and earlier, so you must either use list-style-image
to support IE 7 or simply let IE 7 use a different marker. You can use conditional comments to target IE 7 and earlier.
You can use an background-image in LI
One possible example
http://css.maxdesign.com.au/listamatic/vertical05.htm
There are a limited number of available options for list-style-type
which are defined in the CSS2 spec.
You can use:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- armenian
- georgian
- lower-alpha
- upper-alpha
- none
If you'd like something custom, use the list-style-image
property
If you're styling for browsers that support generated content, you can use:
li:before {
content: '\[utf-8 hex code for character]';
position: absolute;
right: 100%;
}
li {
position: relative;
}
-
Note that this will lead to strange behaviour if your list text is pushed out of position by a floating element. The bullets will not be shifted even though the text will, and the result will probably be undesirable. – Mir Feb 15 '16 at 23:36
Instead of li:before
, which affects all li's (in menu, tabs, accordion) on page, I have used this:
ul {
list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}
<ul>
<li>This is my middot</li>
</ul>