Unicode character as bullet for list-item in CSS

Unicode character as bullet for list-item in CSS

I need to use, for example, star-symbol(?) as a bullet.

I have read the CSS3 module: Lists, that describes, how to use custom text as bullet, but it's not working for me. I think, the browsers simple does't support ::marker pseudo-element

How to do it, without using images ?

Answer by agbb for Unicode character as bullet for list-item in CSS

EDIT

I'd probably wouldn't recommend using images anymore. I'd stick to the approach of using an Unicode character, like this:

li:before {    content: "\2605";  }  

OLD ANSWER

I'd probably go for an image background, they're much more efficient and cross-browser-friendly.

Here's an example:

    
    
List Item 1
    
List Item 2
    
List Item 3
  
  

Answer by 222 for Unicode character as bullet for list-item in CSS

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 & css-tricks say.

You can use conditional comments to apply older/slower solutions like images, or scripts. Better yet, use both with

HTML:

      
    
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.
  
Answer by Charaf jra for Unicode character as bullet for list-item in CSS
Try this code...
    
li:before {      content: "? "; /* caract?re UTF-8 */  }  
  
Answer by Rafael Sanches for Unicode character as bullet for list-item in CSS
you may be able to convert it on tools like: http://www.online-toolz.com/tools/text-unicode-entities-convertor.php
    
then go to your css and use the converted version
  
Answer by defann for Unicode character as bullet for list-item in

CSS

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

Answer by pospi for Unicode character as bullet for list-item in CSS

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 
 */        /* 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.

Answer by PHPst for Unicode character as bullet for list-item in CSS

This is the W3C solution you can use it in 3012!

ul { list-style-type: "?"; }  /* Sets the marker to a "star" character */  

http://dev.w3.org/csswg/css-lists/#marker-content

Answer by Dirk for Unicode character as bullet for list-item in CSS

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

Answer by NicolasBernier for Unicode character as bullet for list-item in CSS

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.

Answer by user2415803 for Unicode character as bullet for list-item in CSS

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72