css - Strikeout li element -


i wonder how make strikeout line on <li> element. needs has specific height, same line before. attached image of menu's project.

i used li:before make dash, not know how figure out strikeout line on it.

enter image description here

this should work. choose put line-through on specific element adding active css class, on hover, focus or whatever.

ul {      list-style: none;      margin: 0;      padding: 0;      max-width: 200px; /* demo purpose */  }    li {      padding-left: 50px;      position: relative;      line-height: 30px; /* demo purpose */  }    li:before {      content: '';      height: 4px;      background-color: black;      width: 30px;      position: absolute;      left: 0;      top: 50%;      /* fix alignment upping position of strikeout 50% of height */      transform: translatey(-50%);  }    li.active:before {      width: 100%;  }
<ul id="footer">      <li>projects</li>      <li class="active">books</li>      <li>news</li>      <li>about</li>      <li>contact</li>  </ul>


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -