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>

---

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 :

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

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

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>

---

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

链接地址: http://www.djcxy.com/p/87814.html

上一篇: HTML中DIV元素的有效属性是什么？

下一篇: 在文本上透明