Skip to content

Instantly share code, notes, and snippets.

@zapthedingbat

zapthedingbat/Highlight.html

Created May 12, 2017 17:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zapthedingbat/b0796c077347d4411ab7eece79ef22b2 to your computer and use it in GitHub Desktop.
Save zapthedingbat/b0796c077347d4411ab7eece79ef22b2 to your computer and use it in GitHub Desktop.
Download ZIP
Highlight effect on <em> tags
Raw
Highlight.html
<html>
<head>
<style>
em:before,
em:after{
content: " ";
display: block;
top:0;
bottom: 0;
left:0;
right:0;
margin:.25em -.5em .25em -.5em;
position: absolute;
background-color: rgba(255,200,0,.50);
z-index:-1;
}
em:before{
transform: rotate(-1deg);
}
em:after{
transform: rotate(1deg) translateY(5%) translateX(2%);
}
</style>
</head>
<body>
<h1>Highlight effect on &lt;em&gt;</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper <em>rhoncus vehicula</em>. Curabitur finibus cursus felis
id lacinia. Proin <em>consequat est eu lorem elementum</em>, at viverra sem ullamcorper.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment