リンクにホバーしたら下線をアニメーション表示

Ads

2017.08.06

Result

See the Pen <a href='https://codepen.io/kachibito/pen/xpwoGq/'>xpwoGq</a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />
非表示にした疑似要素をホバー時に表示+遷移するようにしてあります

css

a:after {/*リンクに疑似要素を追加、配置し非表示に*/
  content: '';
  display: block;
  width: 100%;
  border: 1px solid black;
  transform: translate(0px, 6px);
  opacity: 0;
  color: #999;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
 
a:hover:after {/*ホバー時に位置を移動させつつ表示*/
  transform: translate(0px, 0px);
  opacity: 1;
}

html

Result

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code