マウスが乗るとアンダーラインが出現するアニメーション。 *Gif画像の黒い線はソースコードとは関係ないです。 左から右へ .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; }