I need to implement a transparent strikethrought on text with CSS so I don't have to replace the <h1>
tag by an <img>
tag. I have managed to implement a line-through on the text with CSS but I can't make it transparent.
The desired effect :
What I have :
body{
background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
background-size:cover;
}
h1{
font-family:arial;
position:relative;
display:inline-block;
}
h1:after{
content:'';
position:absolute;
width:100%;
height:2px;
left:0; top:17px;
background:#fff;
}
<h1>EXAMPLE</h1>
How I can I implement the transparent strikethrought which extrudes my text and allows the background to appear in this line.
A strikethrough is a basic copy editing symbol that can be used by hand or digitally. It is represented by a horizontal line that goes through the center of the text as if it is being crossed out. This is an example of a strikethrough.
Strikethrough is a font effect that causes text to appear as though it is crossed out. For example, this text should have a line through the middle of it. The strikethrough effect may be enabled through font properties if a program supports it, or applied to text on a web page using the HTML or CSS.
Adding strikethroughs By selecting a piece of text, you have the option to strike through a piece of text, instead of adding an inline comment. Choose the S icon to strike through.
You may achieve the transparent strikethrought on text only with CSS with the use of line-height
and overflow:hidden;
properties.
Demo : CSS transparent strike through
Output :
Explanation :
<h1>
text withheight:0.52em; overflow:hidden;
use em units so that the height adapts to the font size you are using for the <h1>
tag line-height:0;
Relevant code :
body{
background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
background-size:cover;
}
h1{
font-family:arial;
position:relative;
}
h1 span, h1:after{
display:inline-block;
height:0.52em;
overflow:hidden;
font-size:5em;
}
h1:after{
content: attr(data-content);
line-height:0;
position:absolute;
top:100%; left:0;
}
<h1 data-content="EXAMPLE" ><span>EXAMPLE</span></h1>
Another approach for this effect is to use SVG with a mask element. The demo shows that approach and here is the relevant code :
*{margin:0;padding:0;}
html,body{height:100%;}
body{background: url(https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg) center bottom; background-size:cover;text-align:center;}
svg{
text-transform:uppercase;
color:darkorange;
background: rgba(0,0,0,0.5);
margin-top:5vh;
width:85%;
padding:0;
}
<svg viewbox="0 0 100 13">
<defs>
<mask id="strike">
<rect x="0" y="0" width="100" height="13" fill="#fff" />
<rect x="0" y="5" width="100" height="1" />
</mask>
</defs>
<text id="text1" x="50" y="8.5" font-size="7" text-anchor="middle" fill="darkorange" mask="url(#strike)">SVG strike through</text>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With