After a few trials I've written this code where the border of a link expands:

a {
  position: relative;
  text-decoration: none;

  content: "";
  position: absolute;
//relative to a
  transition: 0.3s width ease-out;  
a:hover::after {
  border: 1px solid black;


  1. Would you suggest any beginner-level improvement of the code?
  2. Or any exercise or variant of it?

There's one bug and one tiny improvement, that I can think of:

  • In my browser (Chrome on Mac), border line on hover animated on top of text rather than under it. It was, because line bottom: 0 was ignored. Previous comment line broke the code. Removing it fixed my problem. There are no // comments in css, always use /* */ (or use scss).
  • When doing animation where object suddenly appears with border on hover, there might be small glitch if initial object is visible, because content has to adjust to newly gained border or size (depends on bounding-box). For example if initial width was 1%. For these reasons, I set transparent border to original element (in this case I mean a::after and on :hover I just add border-color.
| improve this answer | |
  • 1
    \$\begingroup\$ thats was a very good improvement. Thanks a lot! (+1) \$\endgroup\$ – user201579 Dec 14 '19 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy