Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

transparent strikethrought on text

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 :

Text with a transprent strikethrought line

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.

like image 882
Kael Avatar asked Jun 06 '14 13:06

Kael


People also ask

What does strike through look like?

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.

Is strikethrough a font style?

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.

How do you strikethrough text in canvas?

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.


1 Answers

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 :

Text with a transparent cut out strikethrough with CSS


Explanation :

  1. Step 1 : hide the bottom of the <h1>text with
    height:0.52em; overflow:hidden; use em units so that the height adapts to the font size you are using for the <h1> tag
    fiddle
  2. Step 2 : "rewrite" the content in a pseudo element to minimise markup and prevent content repetition. You may use a custom data attribute in order to keep all the content in the markup and don't have to edit the CSS for every title.
    fiddle
  3. step 3 : align the pseudo element text to the top so only the bottom is shown with line-height:0;
    fiddle

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>

SVG

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>
like image 178
web-tiki Avatar answered Sep 30 '22 08:09

web-tiki