Coder Perfect

In the ul> element, a custom bullet symbol is used for the li> elements. That is not an image, but a regular character.

Category: html

Tag: , , ,

Problem

I’ve discovered that the CSS attribute: can be used to define a custom graphic as a bullet character replacement:

list-style-image

Then you give it a URL.

In my case, though, I only want to use the ‘+’ symbol. I don’t want to make a graphic for that and then have to point to it. I’d prefer just tell the unordered list that the bullet symbol should be a plus sign.

Is this possible, or will I have to develop a graphic first?

Asked by idStar

Solution #1

I’m sorry for the late response, but I just stumbled upon this… Try this method to get the indenting right on any lines that wrap:

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

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

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

Answered by Mike T

Solution #2

The following is an excerpt from the book Taming Lists:

Answered by TJ WealthEngine API Evangelist

Solution #3

There are so many options. However, I believe there is still space for improvement.

Advantages:

Answered by Jpsy

Solution #4

This is the W3C’s answer. Firefox, Chrome, and Edge all support it.

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

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

Answered by Handsome Nerd

Solution #5

So far, this is the best answer I’ve come across. It works well and is cross-browser compatible (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. Change the width of your character to 1.2em depending on your needs.

Answered by NicolasBernier

Post is based on https://stackoverflow.com/questions/7698764/custom-bullet-symbol-for-li-elements-in-ul-that-is-a-regular-character-and