CODEWITHSUNDEEP
htmlcss
neurotech
neurotech

Reputation: 5

How can I make text that impedes on it's underline 'block out' the underline with whitespace in HTML/CSS?

Is there any way to reproduce the following effect with HTML/CSS:

https://i.sstatic.net/qi4vQ.png

Basically I want to have my link text 'take priority' and block out some white space around any letters that cross the underline/border-bottom.

Upvotes: 0

Views: 87

Answers (1)

elclanrs
elclanrs

Reputation: 94101

It can be done, it looks like a perfect example for a useful LESS mixin. http://jsfiddle.net/elclanrs/r6Rmh/

p {
    display: inline-block;            
    font: bold 24px Arial;
    border-bottom: 3px solid black;
    text-shadow: -3px 0 white, 3px 0 white;
    line-height: 21px;
}

Upvotes: 1

Related Questions