Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<del> & <ins>
<p class="m-message">
The best things in life are <del class="a-modification -lineThrough">mostly free</del><ins class="a-modification -underlined">actually really expensive</ins>.
</p>
@import url("https://fonts.googleapis.com/css?family=Raleway:400");
del,
ins {
&:before,
&:after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
}
del {
&:before {
content: " [deletion start] ";
}
&:after {
content: " [deletion end] ";
}
}
ins {
&:before {
content: " [insertion start] ";
}
&:after {
content: " [insertion end] ";
}
}
html {
font-size: 16px;
}
body {
min-height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.m-message {
font-family: Raleway, sans-serif;
font-size: 1.5rem;
line-height: 1.5em;
}
.a {
&-modification {
$background-transition: background-size .4s ease-in-out;
text-decoration: none;
display: inline-block;
background-repeat: no-repeat;
&.-lineThrough {
background-position: left center;
background-size: 100% 0.1em;
position: absolute;
transform: translateY(-1em);
font-size: 0.8em;
opacity: .5;
background-image: linear-gradient(to top, currentColor, currentColor);
transition: $background-transition;
&:hover {
background-size: 0 0.1em;
}
}
&.-underlined {
background-position: center bottom;
background-size: 0% 0.1em, 100% 0.1em;
transition: $background-transition;
background-image: linear-gradient(to top, green, green), linear-gradient(to top, rgba(#000, .3), rgba(#000, .3));
.a-modification.-lineThrough:hover + & {
background-size: 100% 0.1em;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.