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.
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
Post a Comment