Use box shadow for link highlight
parent
01f97682a1
commit
6f748da235
|
@ -36,31 +36,13 @@ blockquote {
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
box-shadow: inset 0 -.15em 0 var(--primary-color);
|
||||||
transition: all .2s ease-in;
|
transition: all .2s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--hover-color);
|
color: var(--hover-color);
|
||||||
transition: all .2s ease;
|
box-shadow: inset 0 -1.15em 0 var(--primary-color);
|
||||||
}
|
|
||||||
|
|
||||||
a::after {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
bottom: -3px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
transition: all .2s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover::after {
|
|
||||||
height: 100%;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue