: : what is the marker

::marker is a CSS pseudo-element. It can be used on li elements or display:list-item elements to customize the style of items or numbers.

::marker Indicates the allowed attribute value

:: Marker can only use the following CSS attributes:

  • The font properties
  • Color attributes
  • The content attribute
  • Text-unl – Upright, Unicode-bidi and Direction attributes

::marker Example

Change the item/number color

    #ul1 li::marker{
      color: red;
      font-size: 1.5em;
    }
    #ul2 li::marker{
      color: blue;
      font-size: 1em;
    }
  <ul id="ul1">
     <li>Scene: the PLA shouted to drive away the US military plane</li>
    <li>After being expelled from Fudan university, immigrants sued the university</li>
    <li>Biden: Extend the national emergency for one year</li>
    <li>The defendant in the falling death of a cargo passenger has signed a confession</li>
  </ul>
  <ol id="ul2">
    <li>Scene: the PLA shouted to drive away the US military plane</li>
    <li>After being expelled from Fudan university, immigrants sued the university</li>
    <li>Biden: Extend the national emergency for one year</li>
    <li>The defendant in the falling death of a cargo passenger has signed a confession</li>
  </ol>
Copy the code

Change the item icon

li::marker{
  content: '🧡'
}
Copy the code

Customize the item of the display:list-item element

#ul4{
  margin-left: 40px;
  font-size: 14px;
}
h3 {
  counter-increment: h3;
  display: list-item;
}
h3::marker {
  display: list-item;
  content: "#"counter(h3) "";
  color: lightsalmon;
  font-weight: bold;
}
<div id="ul4">
    <h3>Scene: the PLA shouted to drive away the US military plane</h3>
    <h3>After being expelled from Fudan university, immigrants sued the university</h3>
    <h3>Biden: Extend the national emergency for one year</h3>
    <h3>The defendant in the falling death of a cargo passenger has signed a confession</h3>
</div>
Copy the code

IO /denghuijie/…