Skip to content
Snippets Groups Projects
Commit 88a656c4 authored by Linzheng Tang's avatar Linzheng Tang
Browse files

fix: Fix the underline animation of the links

parent 399a057c
No related branches found
No related tags found
No related merge requests found
Pipeline #530425 failed
...@@ -122,56 +122,59 @@ main { ...@@ -122,56 +122,59 @@ main {
margin: 0 1.5em; margin: 0 1.5em;
} }
} }
a {
a:has(code[class*="language-"]) {
position: relative;
color: light.$pacify-success; color: light.$pacify-success;
text-decoration: none; &:has(code[class*="language-"]) {
transition: color 0.3s ease; position: relative;
background-image: none !important; text-decoration: none;
transition: color 0.3s ease;
&::after { background-image: none !important;
content: "";
position: absolute;
left: 0;
bottom: -0.05em;
width: 100%;
height: 0.1rem;
background-color: light.$pacify-success;
transform: scaleX(1);
transform-origin: left;
transition: transform 0.4s ease;
}
&:hover {
color: light.$pacify-success;
&::after { &::after {
content: "";
position: absolute;
left: 0;
bottom: -0.05em;
width: 100%;
height: 0.1rem;
background-color: light.$pacify-success;
transform: scaleX(0); transform: scaleX(0);
transform-origin: right; transform-origin: right;
transition: transform 0.4s ease;
}
&:hover {
&::after {
transform: scaleX(1);
transform-origin: left;
}
}
}
&:not([data-footnote-ref]):not([data-footnote-backref]):not(
[aria-label*="permalink"]
):not(code[class*="language-"]) {
background-image: linear-gradient(
to right,
light.$pacify-success,
light.$pacify-success
);
background-size: 0 0.1rem, 100% 0.1rem;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease;
&:hover,
&:focus {
background-size: 100% 0.1rem, 0 0.1rem;
background-position: 0 100%, 100% 100%;
} }
} }
}
a:not([data-footnote-ref]):not([data-footnote-backref]):not( code[class*="language-"] {
[aria-label*="permalink"] color: light.$pacify-success;
):not(code[class*="language-"]) {
background-image: linear-gradient(
to right,
light.$pacify-success,
light.$pacify-success
);
background-size: 0 0.1rem, 100% 0.1rem;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease;
&:hover,
&:focus {
background-size: 100% 0.1rem, 0 0.1rem;
background-position: 0 100%, 100% 100%;
} }
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment