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 {
margin: 0 1.5em;
}
}
a:has(code[class*="language-"]) {
position: relative;
a {
color: light.$pacify-success;
text-decoration: none;
transition: color 0.3s ease;
background-image: none !important;
&::after {
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;
&:has(code[class*="language-"]) {
position: relative;
text-decoration: none;
transition: color 0.3s ease;
background-image: none !important;
&::after {
content: "";
position: absolute;
left: 0;
bottom: -0.05em;
width: 100%;
height: 0.1rem;
background-color: light.$pacify-success;
transform: scaleX(0);
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(
[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%;
code[class*="language-"] {
color: light.$pacify-success;
}
}
......
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