Multiline text highlight
Multiline text highlight effect
<h1 class=title><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </span></h1>
.title,
.title:after{
background-color:#333;
}
.title{
position:relative;
line-height:1;
color:#fff;
display:inline;
white-space:pre-wrap;
border:0 solid #333;
border-width:0.25em 0; /* 0.25em is roughly equal to one space character. */
}
.title:after{
content:"";
position:absolute;
top:-0.25em;
right:100%;
bottom:-0.25em;
width:0.25em;
}
.title > span{
position:relative;
z-index:1;
}
not my code found it somewhere on net but its a great tip
Written by Mario Loncarek
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#