Highlighter Effect

by jstnlowe

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet convallis ultricies. Curabitur ultrices mauris erat. Vivamus vitae odio feugiat, <span class="highlight">pharetra tellus non, egestas lectus.</span> Pellentesque euismod sapien ante, at ultrices odio finibus eu. Praesent ut nisi quam. Vivamus lobortis eros at auctor placerat. Suspendisse hendrerit condimentum massa feugiat iaculis. <span class="highlight">Curabitur elit magna, condimentum ac elementum ut,</span> tincidunt in ante. Morbi gravida lectus tempor felis tincidunt, in pulvinar elit ullamcorper.
</p>

CSS

.highlight {
position: relative;
display: inline-block;
text-decoration: none;
background: linear-gradient(135deg, rgba(255,255,136,0.9) 0%,rgba(255,255,136,0.8) 0%,rgba(255,255,136,1) 15%,rgba(255,255,136,1) 14%,rgba(255,255,136,1) 87%,rgba(255,255,136,0) 100%);
}
.highlight::before {
content: '';
background: linear-gradient(135deg, rgba(255,255,136,0.8) 0%,rgba(255,255,136,0.8) 0%,rgba(255,255,136,1) 30%,rgba(255,255,136,1) 14%,rgba(255,255,136,1) 50%,rgba(255,255,136,0) 100%);
border-bottom: 15px solid yellow;
width: 100%;
position: absolute;
left: -0.5em;
right: 0.3em;
top: .2em;
opacity: 0.4;
transform: rotate(2deg);
}