xaux_q
Last Updated: February 25, 2016
·
144
· marioloncarek

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