Adjust thickness of CSS ‘line-trough’

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
Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 */
}