Animated link underline doesn't work with vertical text - html

Question

I tried to use this guide to animate my links' undeline.
However, for the vertical text it doesn't really work, see my Codepen here
What can I change (if possible) to have the vertical text underlined properly with this animation?
HTML:
<div class="hlinks">
ABOUT —
CONTACT
</div>
CSS:
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 20%;
top: 20px;
display: inline;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Again, here's my sample: https://codepen.io/alanvkarlik/pen/QmJQev

Answer 1

You need to adjust your CSS for the .hlinks a elements so that they behave slightly differently from the regular a elements, especially in position of underline and scaling along a different axis.
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 20%;
top: 20px;
display: inline;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.hlinks a:before {
content: "";
position: absolute;
height: 100%;
width: 1px;
top: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.hlinks a:hover:before {
visibility: visible;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<div class="hlinks">
ABOUT —
CONTACT
</div>
ABOUT —
CONTACT

Answer 2

You just need to make some adjustments in positioning of the pseudo-element and a few minor stylistic changes.
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 20%;
top: 20px;
display: inline;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.hlinks a::before {
width: 1px;
height: 0;
top: 0;
}
.hlinks a:hover:before {
visibility: visible;
height: 100%;
<div class="hlinks">
ABOUT —
CONTACT
</div>
ABOUT —
CONTACT

Answer 3

You just need to flip your axis since your text is vertical instead of horizontal. Change all instances of "scaleX" to "scaleY", and then then flip the height and width on a:before. That should do it.