12

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.

6
  • 2
    that is an image, most likely created with illustrator, where a clipping mask was used to "cut out" that line through the text allowing you to see the background behind it. Cannot be done in html and css
    – MilkyTech
    Jun 6, 2014 at 13:10
  • 1
    @ChrisM even thought the "cut out" effect isn't often achievable with CSS, this one is.
    – web-tiki
    Jun 6, 2014 at 13:57
  • @web-tiki OK, I guess technically, you've accomplished it with a bit of a hack. You're actually writing the word twice and cutting off parts. I don't understand why line-height:0 pushes the text up showing the bottom half instead of the top though.
    – MilkyTech
    Jun 6, 2014 at 14:12
  • @ChrisM well it all depends on what you consider as a hack. The CSS/HTML is valid according to W3 standards in my implementation. For the text showing only the bottom part, it is because of line-height:0, it verticaly centers the text to the top of the container and as I set overlow:hidden on the container, only the bottom part of the text appears.
    – web-tiki
    Jun 6, 2014 at 14:22
  • 1
    @ChrisM it doesn't hide it completly becasue I set the height of the element. The overflow:hidden; property hides according to the height, not according to the line-height.
    – web-tiki
    Jun 6, 2014 at 14:40

2 Answers 2

21

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>

3
  • 5
    What a clever implementation. Jun 6, 2014 at 13:54
  • Thanks you, I try to implement this but I'll try to use ´:before´and ´:after´to the text can be highlight yet with transparent color. I'll post this if I success.
    – Kael
    Jun 6, 2014 at 14:46
  • @Kael sorry but I don't understand your last comment :(
    – web-tiki
    Jun 6, 2014 at 14:52
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.