Adjust thickness of CSS ‘line-trough’

Although it will not working on multiple lines, I thought what I found on CodePen after I stumbled upon a CSS-Tricks forum discussion maybe useful for you.

Sometimes you need to put text with ‘line-trough’, but further customization such as the thickness of the line that can be so tricky. Check this CSS, which is written by Andy Howells and its live demo on CodePen:
Live Demo

{code type=codetype}
p {
display: inline-block;
position: relative;
font-size: 22px;
margin-top: 40px;
margin-left: 40px;
}

p:before {
content: “”;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px; /* ADJUST HEIGHT TO ADD WEIGHT */
background: black; /* CHANGE COLOR TO SUIT */
}
{/code}

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

error: Content is protected !!