Use of marker tags in CSS list model

This article mainly introduces the ::master pseudo-element, list-style-image and list-style-type style attributes under list-item , and introduces how to use them in practice. There are other less commonly used style attributes under list-item which are not introduced here. If you are interested, you can move to the CSS standard document

What is ::marker

::marker is a pseudo-element that can define content to fill in list-item to represent the list item. An example will be provided to clearly show its function.

<style>
li::marker { content: "(" counter(list-item) ")"; }
li { display: list-item; }
</style>

<ul>
  <li>zhaodao88.com Find business opportunities</li>
  <li>zhaodao88.com Find connections</li>
  <li>zhaodao88.com Search for purchases</li>
</ul>

Effect picture:

Here, marker element defines the marker in front of each list item, and the content in content pseudo-element is the content to be filled in front of the list item.

Use ::marker to fill the marker content

It should be noted that if ordinary elements want to use marker , they must be defined as display: list-item . list-items will automatically generate marker and counter when they are created.

The marker style can be written using list-style-type and list-style-image attributes or directly using the ::marker pseudo-element. An example is shown below.

Use ::marker pseudo-element to control the marker. The content of the pseudo-element is the content of the marker.

<style>
  p { margin-left: 12 em; }
  p.note {
    display: list-item;
    counter-increment: note-counter;
  }
  p.note::marker {
    content: "Note " counter(note-counter) ":";
    color: blue;
    font-weight: bold;
  }
</style>
<p>zhaodao88.com Find business opportunities</p>
<p class="note">zhaodao88.com Search for purchases</p>
<p>zhaodao88.com Find connections</p>

The effect is as shown:

Of course, you can also set font style, color and other attributes for the marker, similar to the above effect li::marker { color: blue; font-weight:bold; }

It is worth noting that currently only the following attributes can be used on marker pseudo-element

• All font styles: font related
• White-space Property
• The color attribute
• text-combine-upright, unicode-bidi, direction properties
• The content attribute
• All animation and transition properties

There is an issue that suggests that using white-space: pre in markup may not have a good effect. You can try using text-space-collapse: preserve-spaces and text-space-trim: discard-after together to achieve the desired effect. If you are interested, please move to issue 4448 and issue 4891

Use list-style-image to fill the tag content

Specify a marker image. When the list item content is normal, the marker of the list item is filled with the specified image.

The normal value of list-style-image is <image> | none . If it is not defined, it is none . It applies to list items list-items . Where <image> is used to specify url of the marker image. Reference link

The following is an example of usage, which will fill the <li> tag block with the ellipse.png image of the specified link.

li { list-style-image: url("http://www.example.com/ellipse.png") }

Use list-style-type text type to fill the tag content

Specify a marker string. When the list item content is normal, fill the list item marker with the specified string.

The normal value of list-style-type is <counter-style> | <string> | none . If it is not defined, it is disc(圓形標記符) and is applied to list items list-items . Reference link

<counter-style> is a counter style defined by CSS, allowing developers to customize the style of counter . for example:

@counter-style thumbs {
 system: cyclic;
 symbols: "\1F44D";
 suffix: " ";
}

ul {
  list-style-type: thumbs;
}

Specific <counter-style> definition rules reference

The following is an example of using list-style-type ( if the element is not a list element, the element's display must be set to list-item )

ul { list-style-type: "★"; } // Use "★" as a marker p.note { // If the target element is not a list element, the element's display must be set to list-item
  display: list-item;
  list-style-type: "Note: ";
  list-style-position: inside;
}

ol { list-style-type: upper-roman; } // Defined as uppercase Roman numerals ul { list-style-type: symbols(cyclic '○' '●'); } // The marker switches between '○' and '●' ul { list-style-type: none; } // No marker is displayed

Notice

::marker pseudo-element tag is not supported by all browsers, including chrome , which only supports it in version 80 and above by enabling experimental Web Platform . If you want to test the effect, please go to chrome://flags to enable experimental Web Platform . It is not recommended to use this rule in actual projects. It is more recommended to use conventional methods to set the markup block style.

Summarize

Lists are very common in front-end projects and have a wide range of application scenarios. Personally, I think ::marker pseudo-element is a supplement to list-style-image and list-style-text . All three define the filling content of the marker block. image focuses on images, text focuses on strings, and ::marker can define font , color and other styles, each with its own characteristics.

refer to

https://www.w3.org/TR/2020/WD-css-lists-3-20200709
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

This is the end of this article about the use of marker tags in the CSS list model. For more relevant CSS marker tag content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!