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 :

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.

回答1:

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 :

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>

回答2:

You can achieve this in webkit browsers using masking

CSS

h1 {
    -webkit-mask-image: linear-gradient(0deg, white 20px, transparent 20px,  transparent 24px, white 24px);
}

demo

hover demo