How to add content before ::marker in CSS?

Question

ol::before:marker {
    
    font-size: 120%;
    color: #00b7a8; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    content: '√';
}

I want to add "√" before ::marker element and this is my CSS code, but it's no use，could you help me?

Answer 1

If you don't want to use a class then use :nth-* to specify which <li> to style. Just style the ::marker pseudo-element, it gets too crowded with ::before added in. The content: can be manually filled. The normal ::marker for a <li> inside an <ol> is a number and a dot (ex: 1.) so include that and add anything behind it, in front of it, etc..

li:first-of-type::marker {
  content: '✔️/*space*/1./*space*/' 
}

li:first-of-type::marker {
  content: '✔️ 1. ';
}

<ol>
  <li>...I</li>
  <li>...II</li>
  <li>...III</li>
  <li>...IV</li>
  <li>...V</li>
</ol>

Answer 2

Add symbol with class

ol>li.checked::marker {
  content: "√ " counter(list-item) ". ";
}

ul>li.checked::before {
  content: "√";
  margin-left: -30px;
  margin-right: 21px;
}

<h3>Ordered</h3>

<ol>
  <li class='checked'>item 1</li>
  <li>item 2</li>
  <li class='checked'>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ol>

<h3>Unordered</h3>

<ul>
  <li class='checked'>item 1</li>
  <li>item 2</li>
  <li class='checked'>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ul>

<h3>Nested list</h3>

<ul>
  <li class='checked'>
    <ol>
      <li class='checked'>item 1</li>
      <li>item 2</li>
      <li class='checked'>item 3</li>
      <li>
        <ul>
          <li class='checked'>item 1</li>
          <li>item 2</li>
          <li class='checked'>item 3</li>
          <li>item 4</li>
        </ul>
      </li>
      <li>item 5</li>
    </ol>
  </li>
  <li>item 2</li>
  <li class='checked'>item 3</li>
  <li>item 4</li>
</ul>

Add symbol without class

ol>li::marker {
  content: "√ " counter(list-item) ". ";
}

ul>li::before {
  content: "√";
  margin-left: -30px;
  margin-right: 21px;
}

<h3>Ordered</h3>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ol>

<h3>Unordered</h3>

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ul>

<h3>Nested list</h3>

<ul>
  <li>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          <li>item 4</li>
        </ul>
      </li>
      <li>item 5</li>
    </ol>
  </li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>