Houn

2021.07.31

Website develop

【The easiest!】Change the color only for dots and numbers in li tags.(Use the pseudo-element::marker)

This is a way to change the color of only the dots and numbers attached to the li tag.

There are many articles on the Internet that say “remove the default dot with list-style: none; and use the before pseudo-element”, but I’d like to introduce a method that is easier than that and requires much less CSS.

Sample

Unordered list(ul li)

  • リスト1
  • リスト2
  • リスト3

Ordered list(ol li)

  1. リスト1
  2. リスト2
  3. リスト3

Using the ::marker pseudo-element

The dots and numbers attached to the li tag by default are pseudo-elements called::markers.

Let’s see it in action. The following is a list of ul’s with no CSS specified.

  • List element
  • List element

If you look at this in the developer tools, you will see

Structure of a list

It looks like this.

There was a pseudo-element called ::marker. This is what the dot is.

Now that you have found the target you want to change (apply CSS to), the rest is easy.

For example, you can write it like this

Then you can change the dots to red, as shown here.

  • List1
  • List2
  • List3

Supported browsers

See here for supported browsers.
Can I use
Internet explorer is not supported.

Share on SNSシェア

Related 関連記事

お問い合わせ