Custom bullet symbol for li elements in ul 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

User · Answer

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.

_x000D_

ul {_x000D_
  margin-left: 0;_x000D_
  padding-left: 0;_x000D_
  list-style-type: none;_x000D_
}_x000D_
_x000D_
ul li {_x000D_
  position: relative;_x000D_
  margin-left: 1em;_x000D_
}_x000D_
_x000D_
ul li:before {_x000D_
  position: absolute;_x000D_
  left: -1em;_x000D_
  content: "+";_x000D_
}

_x000D_

<ul>_x000D_
  <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>_x000D_
  <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>_x000D_
  <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>_x000D_
  <li>Item 4</li>_x000D_
  <li>Item 5</li>_x000D_
</ul>

_x000D_

User · Answer

This is the W3C solution  Works in Firefox and Chrome    ul   list-style-type           Sets the marker to a  emoji character      http   dev w3 org csswg css-lists  marker-content   x000D   x000D  ul   list-style-type         x000D     lt ul gt  lt li gt item lt  li gt  lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  ul   x000D    list-style-type  none  x000D    margin-left  0  x000D    padding-left  30px     change 30px to anything    x000D    text-indent  -30px  x000D    x000D  ul li before   x000D    content   xy   x000D    display  inline-block   x000D    width  30px  x000D    text-indent  0  x000D    text-align  center     change this for different bullet position    x000D    x000D   lt ul gt  x000D     lt li gt Item 1 lt  li gt  x000D     lt li gt Item 2 lt  li gt  x000D     lt li gt 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 lt  li gt  x000D     lt li gt Item 4 lt  li gt  x000D     lt li gt Item 5 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

Em dash style   ul emdash     list-style-type  none    list-style-position  inside    text-indent  -1 25em    ul emdash  gt  li before     content    2014 00A0      em dash   space

User · Answer

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

User · Answer

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     x000D   x000D  ul   x000D   position  relative  x000D   list-style  none  x000D   margin-left  0  x000D   padding-left  1 2em  x000D    x000D  ul li before   x000D   content       x000D   position  absolute  x000D   left  0  x000D    x000D   lt ul gt  x000D     lt li gt 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  lt  li gt  x000D     lt li gt 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  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

x000D   x000D   single-before   x000D    list-style      x000D    list-style-position  outside important  x000D    x000D   lt ul class  single-before  gt  x000D     lt li gt  is to manifest perfection already in man  lt  li gt  x000D     lt li gt  is to bring out the best facets of our students personalities  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

x000D   x000D   list-dash li   list-bullet li   x000D      position  relative  x000D      list-style-type  none     disc circle hollow  square none    x000D      text-indent  -2em  x000D    x000D   list-dash li before   x000D      content              em dash    x000D    x000D   list-bullet li before   x000D      content            copy and paste a bullet from HTML in browser into CSS  not using ASCII codes     x000D    x000D   lt ul class  list-dash  gt  x000D       lt li gt Item 1 lt  li gt  x000D       lt li gt Item 2 lt  li gt  x000D       lt li gt Item 3 lt  li gt  x000D       lt li gt Item 4 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

try this   x000D   x000D      ul a   x000D          list-style-type  circle  x000D        x000D       x000D      ul b   x000D          list-style-type  square  x000D        x000D       x000D      ol c   x000D          list-style-type  upper-roman  x000D        x000D       x000D      ol d   x000D          list-style-type  lower-alpha  x000D        x000D       x000D   lt  DOCTYPE html gt  x000D       lt html gt  x000D       lt head gt  x000D       x000D       lt  head gt  x000D       lt body gt  x000D       x000D       lt p gt Example of unordered lists  lt  p gt  x000D       lt ul class  a  gt  x000D         lt li gt Coffee lt  li gt  x000D         lt li gt Tea lt  li gt  x000D         lt li gt Coca Cola lt  li gt  x000D       lt  ul gt  x000D       x000D       lt ul class  b  gt  x000D         lt li gt Coffee lt  li gt  x000D         lt li gt Tea lt  li gt  x000D         lt li gt Coca Cola lt  li gt  x000D       lt  ul gt  x000D       x000D       lt p gt Example of ordered lists  lt  p gt  x000D       lt ol class  c  gt  x000D         lt li gt Coffee lt  li gt  x000D         lt li gt Tea lt  li gt  x000D         lt li gt Coca Cola lt  li gt  x000D       lt  ol gt  x000D       x000D       lt ol class  d  gt  x000D         lt li gt Coffee lt  li gt  x000D         lt li gt Tea lt  li gt  x000D         lt li gt Coca Cola lt  li gt  x000D       lt  ol gt  x000D       x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

It s advisable to qualify the styling of the  lt li gt  so it does not affect  lt ol gt  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

User · Answer

Font-awesome provides a great solution out of the box    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 6 3 css font-awesome min css  rel  stylesheet    gt  x000D   x000D   lt ul class  fa-ul  gt  x000D     lt li gt  lt i class  fa-li fa fa-plus  gt  lt  i gt  Lorem ipsum dolor sit amet  consetetur sadipscing elitr  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-plus  gt  lt  i gt  Lorem ipsum dolor sit amet  consetetur sadipscing elitr  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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  ul li  marker     content   quot   quot      Your symbol here        x000D   x000D  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    x000D   lt ul gt     lt li gt France Vs Croatia lt  li gt     lt li gt Cloudy with sunshine lt  li gt     lt li gt Golf session ahead lt  li gt   lt  ul gt  x000D   x000D   x000D

[html] Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

Examples related to html

Examples related to css

Examples related to webkit

Examples related to mobile-webkit