問題 CSS で underline に animation をつけたい。 解決策 ::after / :hover / display / transition / width を組み合わせることで実現できる。 例 結果は https://jsfiddle.net/666xcjhj/ . a { text-decoration: none; } /* reset default css */ a { display: inline-block; } a::after { content: ""; display: block; width: 0; transition: width 0.3s; border-bottom: 1px solid #f00; } a:hover::after { width: 100%; } 解説 ::after を underline として利用する。 t