CODEWITHSUNDEEP
htmlcsshtml-lists
Giulio
Giulio

Reputation: 803

Is it possible to use custom text for the <li> tag bullet?

I want to use a character instead of a picture for the li tag. I can't find any help on Google.
I know about list-style-image: url(myimage.gif) but I don't want to use a picture because it is not scalable and it doesn't look good on retina.

Upvotes: 3

Views: 2205

Answers (2)

Adé
Adé

Reputation: 494

Currently there are other options.

The ::marker CSS pseudo-element:

li::marker {
    content: '> ';
    color: red;
    font-size: 1.5em;
}

(However, ::marker doesn't seem to be fully supported on Safari: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility)

Using text in list-style-type:

li {
  list-style-type: '> ';
}

Great reference on this topic: https://web.dev/css-marker-pseudo-element/

Upvotes: 0

joews
joews

Reputation: 30310

Do you mean "can I use some text instead of a bullet point or an image"?

if so, the css :before pseudo-element can help:

li {
  list-style-type: none;
}

li:before {
  content: '* ';
}

Obviously replace "* " with your choice of text.

You can use normal CSS on the :before element to style as you like. For example:

li:before {
  content: '> ';
  font-family: 'wingdings';
  font-weight:  bold;
}

You could get scalable graphics by combining this technique with an SVG font like Font Awesome.

Upvotes: 10

Related Questions