文字をホバーすると下線が伸びるようなギミックを作ります。

サンプル

HOME

HTML

<div class="sample-01">HOME</div>
<div class="sample-02">HOME</div>
<div class="sample-03">HOME</div>

CSS

.sample-01 {
  display: inline-block;
  position: relative;
}

.sample-01::after {
  position: absolute;
  left: 50%;
  bottom: -1px;
  content: ' ';
  height: 3px;
  width: 0;
  transition: .5s all;
  transform: translateX(-50%);
  background-color: #ffd700;
}

.sample-01:hover:after {
  width: 100%;
}

.sample-02 {
  display: inline-block;
  position: relative;
}

.sample-02::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  content: ' ';
  height: 3px;
  width: 0;
  transition: .5s all;
  background-color: #ffd700;
}

.sample-02:hover:after {
  width: 100%;
}

.sample-03 {
  display: inline-block;
  position: relative;
}

.sample-03::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  content: ' ';
  height: 3px;
  width: 0;
  transition: .5s all;
  background-color: #ffd700;
}

.sample-03:hover:after {
  width: 100%;
}

最後に

特にありません。