home ~ projects ~ socials

Strikethrough A List Item With CSS

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer leo augue, aliquam in augue ut, molestie tempus nisi.
Sed vel tristique enim. Phasellus eu tempus orci. Nunc non tincidunt sem, ac suscipit est.
Nunc accumsan sit amet dolor at elementum. Sed mattis leo in arcu pellentesque lacinia sit amet non libero.

HTML

<ul id="target_list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Integer leo augue, aliquam in augue ut, molestie tempus nisi.</li>
  <li>Sed vel tristique enim. Phasellus eu tempus orci. Nunc non tincidunt sem, ac suscipit est.</li>
  <li>Nunc accumsan sit amet dolor at elementum. Sed mattis leo in arcu pellentesque lacinia sit amet non libero.</li>
</ul>

CSS

#target_list li:nth-child(2) {
  text-decoration: line-through;
}

TL;DR

Use li:nth-child(#) and text-decoration: line-through; to stikethrough a list item

-- end of line --