The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. Tip: Use CSS to style lists. Tip: For ordered lists, use the <ol> tag.
The Unicode character for showing the dot symbol or bullet point is U+2022 .
First, place the <ul>… </ul> tags around the text to turn into a bulleted list. Second, place the <li>… </li> tags around each line item in the list.
You need to bring the bullet points inside the content flow by using list-style-position:inside; , and then center align the text.
Use li:before
with an escaped Hex HTML Entity (or any plain text).
Example
My example will produce lists with check marks as bullets.
ul {
list-style: none;
padding: 0px;
}
ul li:before
{
content: '\2713';
margin: 0 1em; /* any design */
}
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Browser Compatibility
Haven't tested myself, but it should be supported as of IE8. At least that's what quirksmode & css-tricks say.
You can use conditional comments to apply older/slower solutions like images, or scripts. Better yet, use both with <noscript>
for the images.
HTML:
<!--[if lt IE 8]>
*SCRIPT SOLUTION*
<noscript>
*IMAGE SOLUTION*
</noscript>
<![endif]-->
About background images
Background images are indeed easy to handle, but...
background-size
is actually only as of IE9.list-style
(the more logical choice) easier.Enjoy.
EDIT
I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:
li:before {
content: "\2605";
}
OLD ANSWER
I'd probably go for an image background, they're much more efficient versatile and cross-browser-friendly.
Here's an example:
<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
You can construct it:
#modal-select-your-position li {
/* handle multiline */
overflow: visible;
padding-left: 17px;
position: relative;
}
#modal-select-your-position li:before {
/* your own marker in content */
content: "—";
left: 0;
position: absolute;
}
<ul id="modal-select-your-position">
<li>First item</li>
<li>Second item</li>
</ul>
This is the W3C solution. You can use it in 3012!
ul { list-style-type: "*"; } /* Sets the marker to a "star" character */
https://drafts.csswg.org/css-lists/#text-markers
Update: according to the comments this works in all modern browsers in 2021.
Images are not recommended since they may appear pixelated on some devices (Apple devices with Retina display) or when zoomed in. With a character, your list looks awesome everytime.
Here is the best solution I've found so far. It works great and it's cross-browser (IE 8+).
ul {
list-style: none;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
The important thing is to have the character in a floating block with a fixed width so that the text remains aligned if it's too long to fit on a single line. 1.2em is the width you want for your character, change it for your needs. Don't forget to reset padding and margin for ul and li elements.
EDIT: Be aware that the "1.2em" size may vary if you use a different font in ul and li:before. It's safer to use pixels.
To add a star use the Unicode character 22C6
.
I added a space to make a little gap between the li
and the star. The code for space is A0
.
li:before {
content: '\22C6\A0';
}
A more complete example of 222's answer:
ul {
list-style:none;
padding: 0 0 0 2em; /* padding includes space for character and its margin */
/* IE7 and lower use default */
*list-style: disc;
*padding: 0 0 0 1em;
}
ul li:before {
content: '\25BA';
font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
margin: 0 1em 0 -1em; /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */
/* IE7 and lower use default */
*content: none;
*margin: 0;
}
ul li {
text-indent: -1em; /* negative text indent brings first line back inline with the others */
/* IE7 and lower use default */
*text-indent: 0;
}
I have included star-hack properties to restore the default list styles in older IE versions. You could pull these out and include them in a conditional include if desired, or replace with a background-image based solution. My humble opinion is that special bullet styles implemented in this manner should degrade gracefully on the few browsers that don't support pseudoselectors.
Tested in Firefox, Chrome, Safari and IE8-10 and renders correctly in all.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With