Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image
Solution 1
The following is quoted from Taming Lists:
There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }
Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.
The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using », the right double angle quote: ».
» Item 1
» Item 2
» Item 3
» Item 4
» Item 5 we'll make
a bit longer so that
it will wrap
Solution 2
This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
Solution 3
So many solutions.
But I still think there is room for improvement.
Advantages:
- very compact code
- works with any font size
(no absolute pixel values contained) - aligns rows perfectly
(no slight shift between first line and following lines)
ul {
position: relative;
list-style: none;
margin-left: 0;
padding-left: 1.2em;
}
ul li:before {
content: "+";
position: absolute;
left: 0;
}
<ul>
<li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
<li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>
Solution 4
This is the W3C solution. Works in Firefox, Chrome and Edge.
ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */
http://dev.w3.org/csswg/css-lists/#marker-content
ul { list-style-type: "🔔 "; }
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
Solution 5
Here is the best solution I've found so far. It works great and it's cross-browser (IE 8+).
ul {
list-style: none;
margin-left: 0;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}
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.
Related videos on Youtube
idStar
I'm Sohail, a developer-consultant and entrepreneur primarily focused on building high quality iOS apps. I write about software development. Mostly iOS related and sometimes, Ruby on Rails. You can follow me on my professional blog on software development, at sohail.io.
Updated on February 06, 2022Comments
-
idStar over 2 years
I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:
list-style-image
And then giving it a URL.
However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.
Can this be done or am I forced to make it a graphic first?
-
idStar over 12 yearsYour solution worked, in combination with the :before pseudo-selector that you and @Tieson T. both point to. I liked that you called out how the various attributes on <UL> work in concert to mimic bullet indentation.
-
idStar over 12 yearsThis is how I put it together, which worked: ul { font-size: 14px; line-height: 16px; list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; } li:before { content: "+ "; } I did have to put a space after the + symbol, but it looks reasonably well aligned.
-
Konrad Höffner almost 12 yearsUnfortunately with this method the bullet sign gets included in selections which is not the case for the normal bullets.
-
kheya about 10 yearsUp voted this just because of /*copy and paste a bullet from HTML in browser into css (not using ascii codes) */
-
Charles Roper over 8 yearsThis is easily the best solution I've found.
-
Anton Samsonov almost 8 yearsAlthough it seems to work in current versions of Firefox, the result is extremely ugly: custom bullet is placed right in front of text content (snapping to it), almost as if
li:before {content:"…";}
was used without any other indentation and alignment. -
cobaltduck almost 8 yearsFor me, it works better to use ch as the unit of measurement, specifically to do
text-indent: -2ch
to account for the + sign and the space after it, thenpadding-right: 1ch
to add that space. Still, a big +1. -
user3168511 over 6 yearsthis is the very best
-
Ionut Ciuta about 6 yearsThis is a better answer in my opinion because it points out how you can customize other details as well. And it also has the "Run code snippet" attached!
-
EvilDr over 5 yearsThis is should be the answer. Clean and simple
-
Admin over 5 yearsab-use of
float
again? ... naah. -
AnnieP almost 5 yearsI was looking for a solution using an image and tried lots of answers, but this one worked best for me! I was able to use
content: url('link-to-my-asset.svg');
and set the image width and padding between the bullet and content. Thanks! -
velkoon over 4 yearsThank you--This is very clean and I forgot about the
!important
, which was vital to get my custom CSS in Blogspot to work -
Kushagr Arora almost 4 yearsThis is a good answer. However, I needed a solution which could support column-count as well
-
Admin over 3 yearsGreat answer! Like @KushagrArora I was looking for a multi-column answer, but I got it to work by adding absolute positioning to the
<li>
instead -
Felix over 3 yearsThis is perfect!
-
Handsome Nerd almost 3 years@AntonSamsonov it seems extremely pretty to me.
-
MikhailRatner about 2 yearsI needed to an SVG instead of the default marker, so I used
ul { list-style-image: url(assets/...); }
-> Works perfectly!