Question

我尝试使用此guide来动画我的链接＆＃39; undeline。

但是，对于垂直文本，它并不真正有效，see my Codepen here

我可以更改（如果可能）使用此动画正确加下划线的垂直文字？

HTML：

<div class="hlinks">
      <a href="about.html">ABOUT</a> &mdash;
      <a href="contact.html">CONTACT</a>
</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);
}

再次，这是我的样本：https://codepen.io/alanvkarlik/pen/QmJQev

Answer 1

你只需要对伪元素的定位和一些小的风格变化做一些调整。

  .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">
  <a href="about.html">ABOUT</a> &mdash;
  <a href="contact.html">CONTACT</a>
</div>

<a href="about.html">ABOUT</a> &mdash;
<a href="contact.html">CONTACT</a>

Answer 2

您需要调整.hlinks元素的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;
}

.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">
  <a href="about.html">ABOUT</a> &mdash;
  <a href="contact.html">CONTACT</a>
</div>
<a href="about.html">ABOUT</a> &mdash;
<a href="contact.html">CONTACT</a>

Answer 3

您只需要翻转轴，因为文字是垂直的而不是水平的。将“scaleX”的所有实例更改为“scaleY”，然后在a：之前翻转高度和宽度。应该这样做。

动画链接下划线不适用于垂直文本

3 个答案: