Last Updated: February 25, 2016

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

#css

#html

#hightlight