■CSSでアンダーラインアニメーション（aタグに導入）■
▲アンダーラインがフェードイン▲
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a { position: relative; display: inline-block; transition: .3s;}
a::after { position: absolute; bottom: .3em; left: 0; content: ”; width: 100%; height: 1px; background-color: #2ecc71; opacity: 0; transition: .3s;}
a:hover::after { bottom: 0; opacity: 1;}
▲左からラインが伸びる（下）▲
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します
。CSS
a { position: relative; display: inline-block; transition: .3s;}
a::after { position: absolute; bottom: 0; left: 0; content: ”; width: 0; height: 1px; background-color: #2ecc71; transition: .3s;}
a:hover::after { width: 100%;}
▲左右からラインが伸びる（上下）▲
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a { position: relative; display: inline-block; transition: .3s;}a::before,
a::after { position: absolute; content: ”; width: 0; height: 1px; background-color: #2ecc71; transition: .3s;}
a::before { top: 0; left: 0;}
a::after { bottom: 0; right: 0;}
a:hover::before,
a:hover::after { width: 100%;}
▲中央からラインが伸びる（下）▲
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a { position: relative; display: inline-block; transition: .3s;}a::after { position: absolute; bottom: 0; left: 50%; content: ”; width: 0; height: 1px; background-color: #2ecc71; transition: .3s; -webkit-transform: translateX(-50%); transform: translateX(-50%);}a:hover::after { width: 100%;}
▲中央からラインが伸びる（上下）▲
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a { position: relative; display: inline-block; transition: .3s;}a::before,
a::after { position: absolute; left: 50%; content: ”; width: 0; height: 1px; background-color: #2ecc71; transition: .3s; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
a::before { top: 0;}
a::after { bottom: 0;}
a:hover::before,
a:hover::after { width: 100%;}