Unordered list with arrows for some elements-CodePudding

I need arrows for some elements in an unordered HTML list like this:

I know how to get this with ul { list-style: none; } and ul li:before{ ... } in CSS for the whole list. But I need this for only some elements in the same list.

CodePudding user response：

CSS has the ::marker pseudo element for this, which is widely supported except in any version of Internet Explorer.

.arrow::marker {
  content: "⇾";
}

<ul>
  <li>First
  <li>Second
  <li >Third
  <li>Fourth
  <li >Fifth
</ul>

If you cannot change the HTML and add thus, cannot add the arrow class, and the list has fixed content that won't change over time, you can work with nth-child() selectors:

:is(li:nth-child(3), li:nth-child(5))::marker {
  content: "⇾";
}

<ul>
  <li>First
  <li>Second
  <li>Third
  <li>Fourth
  <li>Fifth
</ul>

Note: The :is(...selectors) selector is also, while almost unknown, widely supported.

CodePudding user response：

As you mentioned that you know in advance which elements, you could add to them.

.sub { list-style:none; }
.sub:before {
    content: "\2192 \0020";
}

<ul>
    <li>This</li>
    <li>Is</li>
    <li>A</li>
    <li >Unordered</li>
    <li >List</li>
</ul>

// Answer based on this, All that was needed to be changed is from

#sub li:before {content: "\2192 \0020";} to .sub:before {content: "\2192 \0020";}