Quick experiments with :before & :after hover effects on single line elements.
A Pen by Misha Heesakkers on CodePen.
<p> | |
"Attractive things make people feel good, which in turn makes them think more</a> <a class="link-1" href="#">creatively</a>. How does that make something easier to use? Simple, by making it easier for <a class="link-2">people</a> to find solutions to the problems they encounter." <strong>- Don Norman</strong> | |
</p> |
@use postcss-simple-vars; | |
@use postcss-nested; | |
@import 'https://fonts.googleapis.com/css?family=Lora:400,700'; | |
$underlineColor: #00B388; | |
$underlineHeight: 5%; | |
* { | |
box-sizing: border-box; | |
} | |
html, body { | |
font-family: 'Lora', serif; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
body { | |
border: 8px solid $underlineColor; | |
} | |
a { | |
cursor: pointer; | |
} | |
strong { | |
margin-top: 16px; | |
display: block; | |
font-weight: 700; | |
} | |
p { | |
padding: 24px; | |
max-width: 760px; | |
font-size: 22px; | |
font-weight: 300; | |
line-height: 1.9; | |
} | |
.link-1 { | |
position: relative; | |
text-decoration: none; | |
display: inline-block; | |
color: black; | |
padding: 0 1px; | |
transition: color ease 0.3s; | |
&::after { | |
content: ''; | |
position: absolute; | |
z-index: -1; | |
width: 100%; | |
height: $underlineHeight; | |
left: 0; | |
bottom: 0; | |
background-color: $underlineColor; | |
transition: all ease 0.3s; | |
} | |
&:hover { | |
color: white; | |
&::after { | |
height: 100%; | |
} | |
} | |
} | |
.link-2 { | |
position: relative; | |
text-decoration: none; | |
display: inline-block; | |
color: black; | |
padding: 0 1px; | |
transition: color ease 0.3s; | |
&::before, &::after { | |
content: ''; | |
position: absolute; | |
background-color: $underlineColor; | |
z-index: -1; | |
height: $underlineHeight; | |
} | |
&::before { | |
width: 0%; | |
left: 0; | |
bottom: 0; | |
transition: width ease 0.4s; | |
} | |
&::after { | |
width: 100%; | |
left: 0; | |
bottom: 0; | |
transition: all ease 0.6s; | |
} | |
&:hover { | |
&::before { | |
width: 100%; | |
} | |
&::after { | |
left: 100%; | |
width: 0%; | |
transition: all ease 0.2s; | |
} | |
} | |
} |
Quick experiments with :before & :after hover effects on single line elements.
A Pen by Misha Heesakkers on CodePen.