How to add an exclamation mark to the end of last list item using css

Question

How to add an exclamation mark to the end of last list item using css

<ul> 
<li><span>one</span></li> 
<li><span>two</span></li> 
<li><span>three</span></li> 
<li><span>four</span></li> 
<li><span>one</span></li> 
<li><span>two</span></li> 
<li><span>three</span></li> 
<li><span>four</span></li> 
</ul>

Answer 1

You can do that easily with the code below

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li:last-child {
  position: relative;
  display: inline-block;
}

li:last-child::after {
  content: "!";
  position: absolute;
  right: -10px;
}