CSS pseudo-elements - style links using ::after pseudo element and CSS transition property
Style links using ::after pseudo element and CSS 'transition' property
https://cssanimation.rocks/animating-...
1. We declare position: relative on our anchor elements so they can act as containers for our absolutely positioned a::after pseudo-element (see step 2).
a:link {
position: relative; /*creates positioning context for absolutely positioned 'after' pseudo-element*/
text-decoration: none;
}
2. We use absolutely positioned a::after pseudo-element to add border. We declare empty “content" property so that we can add border-top on our pseudo-element. We give the element 'right' and 'left' property as "0" (zero) to stretch the line across the link
a:link::after
border-top: 1px solid blueviolet;
content: " "; /*empty content still needs to be declared*/
position: absolute;
right: 0; /*change to 100% in step 3*/
top: 1.1em;
left: 0;
3.We change the 'right' property in the above rule to 100% (try 50% to demonstrate left-to-right effect).We add 'transition' property to our a:link::after rule above to animate the underline on hover.
a:link::after {
border-top: 1px solid blueviolet;
content: ""; /*empty content still needs to be declared*/
position: absolute;
right: 100%;
top: 1.1em;
left: 0;
transition: right .4s ; /* transition 'right' property during 0.4second*/
}
4. We add on hover state to our pseudo-element with 'right' set to '0' (zero) so that line goes left to right on hover
a:hover::after
right: 0;