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

Question

<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>

Get the element by id, then change its value using `.innertext`. — M-Chen-3, Apr 21 '21 at 00:31

score 1 · Answer 1 · answered Apr 20 '21 at 12:07

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;
}

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

1 Answers1