Custom bullet symbol for
elements in
that is a regular character, and not an image

Question

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?

score 195 · Answer 1 · answered Aug 31 '12 at 14:02

195

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;
}

answered Aug 31 '12 at 14:02

Mike T

2,536
2
18
9

2

For 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, then `padding-right: 1ch` to add that space. Still, a big +1. – cobaltduck Aug 10 '16 at 15:58

score 94 · Accepted Answer · edited Jun 20 '20 at 09:12

94

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 08 '11 at 18:22

TJ WealthEngine API Evangelist

1,128
8
12

1
Your 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
– idStar Oct 08 '11 at 21:08
10

This 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. – idStar Oct 08 '11 at 21:09
6

Unfortunately with this method the bullet sign gets included in selections which is not the case for the normal bullets. – Konrad Höffner Aug 02 '12 at 12:41

score 82 · Answer 3 · edited Nov 06 '22 at 17:35

82

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>

You can also style that inline. Combine single ' and double quotes " to avoid conflict:

<ul style="list-style-type: ' ';">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

If you can't risk to write unicode in your source code you still can set the HTML entity (ie: 🔔) in the list-style-type and it will be properly rendered (ie: ) - Run the code snippet to try it out.

<ul style="list-style-type: '&#x1F514; ';">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

edited Nov 06 '22 at 17:35

Xavi Montero

9,239
7
57
79

answered Jul 24 '13 at 07:58

Handsome Nerd

17,114
22
95
173

3

Although 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. – Anton Samsonov Jul 15 '16 at 13:18
3

@AntonSamsonov it seems extremely pretty to me. – Handsome Nerd Jun 05 '21 at 21:04
4

I needed to an SVG instead of the default marker, so I used ```ul { list-style-image: url(assets/...); }``` -> Works perfectly! – MikhailRatner Feb 17 '22 at 08:51
Wow, didn't know this was a thing way back in 2013! Without a doubt it's the simplest answer to the question—no hacks, full support by all the major browsers. This should be the accepted answer. – Kal Sep 08 '22 at 05:35

score 66 · Answer 4 · answered Sep 15 '16 at 10:46

66

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>

answered Sep 15 '16 at 10:46

Jpsy

20,077
7
118
115

3

this is the very best – user3168511 Aug 21 '17 at 15:45
1

This 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! – Ionut Ciuta Apr 01 '18 at 09:57
1

This is should be the answer. Clean and simple – EvilDr Aug 22 '18 at 08:20
2

I 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! – AnnieP May 23 '19 at 17:33
This is a good answer. However, I needed a solution which could support column-count as well – Kushagr Arora Jul 21 '20 at 04:29
1

Great answer! Like @KushagrArora I was looking for a multi-column answer, but I got it to work by adding absolute positioning to the `
` instead

Nov 24 '20 at 18:28

1

This is perfect! – Felix Dec 15 '20 at 19:22

score 21 · Answer 5 · answered Feb 17 '14 at 15:06

21

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.

answered Feb 17 '14 at 15:06

NicolasBernier

1,586
14
15

This is easily the best solution I've found. – Charles Roper Feb 10 '16 at 11:22
1

ab-use of `float` again? ... naah. – Dec 24 '18 at 12:49

score 14 · Answer 6 · edited Oct 20 '16 at 10:45

Font-awesome provides a great solution out of the box:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

user648519 · Answer 7 · 2016-03-20T02:23:16.210

My solution uses positioning to get wrapped lines automatically line up correctly. So you don't have to worry about setting padding-right on the li:before.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

score 11 · Answer 8 · answered Oct 08 '11 at 18:19

11

You can use the :before pseudo-selector to insert content in front of the list item. You can find an example on Quirksmode, at http://www.quirksmode.org/css/beforeafter.html. I use this to insert giant quotes around blockquotes...

HTH.

answered Oct 08 '11 at 18:19

Tieson T.

20,774
6
77
92

score 9 · Answer 9 · answered Oct 06 '13 at 21:22

It's advisable to qualify the styling of the <li> so it does not affect <ol> list items. So:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

m4n0 · Answer 10 · 2022-09-08T07:50:21.820

You can make use of ::marker pseudo-element. This is useful in situations when you need to have different character entities for each list item.

As @Kal mentions, content on ::marker is not supported in Safari at the time of edit.

ul li::marker {
  content: " "; /* Your symbol here */
}

ul li:nth-child(1)::marker {
  content: "\26BD   ";
}

ul li:nth-child(2)::marker {
  content: "\26C5   ";
}

ul li:nth-child(3)::marker {
  content: "\26F3   ";
}

ul li::marker {
  font-size: 20px;
}

ul li {
  margin: 15px 0;
  font-family: sans-serif;
  background: #BADA55;
  color: black;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
}

<ul>
  <li>France Vs Croatia</li>
  <li>Cloudy with sunshine</li>
  <li>Golf session ahead</li>
</ul>

Definitely an option, but it would be worth mentioning in your answer that Safari still (as of Sep 2022) doesn't support the `content` property on the `::marker` pseudo element. (Otherwise Safari users are wondering why they're seeing standard disc bullets in your code example.) — Kal, Sep 08 '22 at 05:29

score 5 · Answer 11 · edited Jun 16 '16 at 15:48

5

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}

<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

edited Jun 16 '16 at 15:48

TylerH

20,799
66
75
101

answered Dec 31 '13 at 08:19

bob

7,539
2
46
42

Up voted this just because of /*copy and paste a bullet from HTML in browser into css (not using ascii codes) */ – kheya Mar 17 '14 at 01:12

score 5 · Answer 12 · edited May 19 '20 at 10:35

5

.single-before {
  list-style: "";
  list-style-position: outside!important;
}

<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>

edited May 19 '20 at 10:35

Alex Angas

59,219
41
137
210

answered Nov 18 '19 at 12:43

Viraj Giri

51
1
1

Thank you--This is very clean and I forgot about the `!important`, which was vital to get my custom CSS in Blogspot to work – velkoon Feb 09 '20 at 21:07

score 4 · Answer 13 · answered Jan 30 '19 at 08:42

4

Em dash style:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

answered Jan 30 '19 at 08:42

dmartinezfernandez

41
1
3

score 2 · Answer 14 · answered Aug 04 '15 at 09:14

2

I prefer to use negative margin, gives you more control

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

answered Aug 04 '15 at 09:14

John Magnolia

16,769
36
159
270

gorn · Answer 15 · 2016-03-27T07:49:00.380

Interestingly enough I do not thing any of the posted solutions are good enough, because they rely on the fact that the character used is 1em wide, which does not need to be so (with maybe exception of John Magnolia's answer which however uses floats which can complicate things another way). Here is my attempt:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

This has these advantages (over other solutions):

It does not rely on the width of the symbol as you see in the example. I used two characters to show that it works even with wide bullets. If you try this in other solutions you get the text misaligned (in fact it is even visible with * symbol in higher zooms).
It gives you total control of the space used by bullets. You can replace 30px by anything (even 1em etc). Just do not forgot to change it on all three places.
If gives you total control of positioning of the bullet. Just replace the text-align: center; by anything to your liking. For example you may try color: red; text-align: right; padding-right: 5px; box-sizing: border-box; or if you do not like playing with border-box, just subtract the padding (5px) from width (i.e. width:25px in this example). There are lots of options.
It does not use floats so it can be contained anywhere.

Enjoy.

score 1 · Answer 16 · answered Apr 22 '21 at 12:16

In Bootstrap you can use class list-unstyled. Then, instead bullet you can use for example HTML emoji or something else:

<ul class="text-dark display-4 list-unstyled">
    <li>&#127774; Phasellus iaculis neque</li>
    <li>&#127803; Purus sodales ultricies</li>
    <li>&#127774; Vestibulum laoreet porttitor sem</li>
    <li>&#127803; Ac tristique libero volutpat at</li>
</ul>

score 1 · Answer 17 · answered Aug 12 '21 at 17:52

First, thanks to @Jpsy as my answer is based on that.

I have extended that answer to support the Google Material Icons pack as the custom icon.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>

ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}

ul li:before {
    font-family: 'Material Icons';
    content: "double_arrow"; /* Change this to whichever icon you would like from https://fonts.google.com/icons?selected=Material+Icons */
    position: absolute;
    left: 0;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
      url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

score 0 · Answer 18 · answered Sep 29 '22 at 19:42

Not the preetiest answer but i like minimal css.

ul { list-style-type: '\002B\00a0\00a0'; }

unicode for +: 002B

unicode for white space: 00a0

You can search for other symbols in unicode and just add white space until you are satisfied with positioning.

P.S.: Someone gave almost the same answer but I couldn't comment on it.

score -3 · Answer 19 · edited Jun 16 '16 at 16:05

try this

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>

Custom bullet symbol for
elements in
that is a regular character, and not an image

19 Answers19

Linked

Related

Custom bullet symbol for elements in that is a regular character, and not an image

19 Answers19

Linked

Related

Custom bullet symbol for
elements in
that is a regular character, and not an image