CSSだけでスタイリッシュな下線付き矢印

色々と探したがありそうでなかったデザイン

CSSだけでスタイリッシュな下線付き矢印 pic.twitter.com/UHLdy2RGGm

— 高卒プログラマーげんと (@gento34165638) July 12, 2020

今回紹介するのはこんなデザイン！

なかなかありそうで無かった。。。

下線付き矢印を作る

  <div class="row">
          <div class="moreLink">
            <div class=" moreLinkText">実現したいことについて、もっと知る
              <div class="lineArrow"></div>
            </div>
          </div>
        </div>

.moreLinkText {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}
/*ホバーしたときに下線矢印も同時に色を変える*/
.moreLinkText:hover .lineArrow  {
    border-bottom: 1px solid #41A849;
    border-right: 1px solid #41A849;
}
.moreLinkText:hover {
    color: #41A849;
}
.lineArrow {
  width: 120%;
  height: 15px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
   /*傾きを調節*/
  transform: skew(45deg);
  /*下線矢印をテキストに合わせてうまい具合にはめる*/
  margin: -10px 0 0 -25px;
}

参考