Unicode character as bullet for list-item in CSS

Question

I need to use  for example  the star-symbol    as the bullet for a list-item   I have read the CSS3 module  Lists  that describes  how to use custom text as bullets  but it s not working for me  I think  the browsers simply don t support the   marker pseudo element   How can I do it  without using images

User · Answer

This topic may be old  but here s a quick fix ul  list-style outside none square   or  ul  list-style outside none disc     etc     then add left padding to list element  ul li line-height  1 4 padding-bottom  6px

User · Answer

Today  there is a   marker option  so  li  marker     content   quot  2605 quot

User · Answer

Try this code     li before       content           caract  re UTF-8

User · Answer

ul       list-style-type  none         ul li before       content         Change this to unicode as needed       width  1em  important      margin-left  -1em      display  inline-block

User · Answer

Using Text As Bullets  Use li before with an escaped Hex HTML Entity  or any plain text      Example  My example will produce lists with check marks as bullets   CSS   ul       list-style  none      padding  0px     ul li before       content    2713       margin  0 1em        any design          Browser Compatibility  Haven t tested myself  but it should be supported as of IE8  At least that s what quirksmode  amp  css-tricks say   You can use conditional comments to apply older slower solutions like images  or scripts  Better yet  use both with  lt noscript gt  for the images   HTML    lt  -- if lt IE 8  gt       SCRIPT SOLUTION       lt noscript gt           IMAGE SOLUTION       lt  noscript gt   lt   endif -- gt      About background images  Background images are indeed easy to handle  but      Browser support for background-size is actually only as of IE9  HTML text colors and special  crazy  fonts can do a lot  with less HTTP requests  A script solution can just inject the HTML Entity  and let the same CSS do the work  A good resetting CSS code might make list-style  the more logical choice  easier      Enjoy

User · Answer

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

User · Answer

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  lt ul gt             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

User · Answer

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

User · Answer

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    lt style type  text css  gt    ul  list-style none      you should use a css reset too            ul li  background url images icon star gif  no-repeat 0 5px    lt  style gt    lt ul gt     lt li gt List Item 1 lt  li gt     lt li gt List Item 2 lt  li gt     lt li gt List Item 3 lt  li gt   lt  ul gt

User · Answer

I ve been through this whole list and there are partially correct and partially incorrect elements right through  as of 2020   I found that the indent and offset was the biggest problem when using UTF-8  so I m posting this as a 2020 compatible CSS solution using the  upright triangle  bullet as my example   ul       list-style  none      text-indent  -2em     needs to be 1     2 x margin   and the result  negative     ul li before       content    25B2       margin  0 0 5em     0 5 x 2   1    1 offset to get the bullet back in the right spot     use em as the unit to avoid conflict with font sizing

User · Answer

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

User · Answer

update  in the comments  Goerge says  quot  This works on Chrome  Firefox and Edge  but not Safari  quot  This is the W3C solution  You can use it in 3012   ul   list-style-type   quot   quot        Sets the marker to a  quot star quot  character      https   drafts csswg org css-lists  text-markers

[html] Unicode character as bullet for list-item in CSS

Examples related to html

Examples related to css

Examples related to html-lists