transitionとborderを使った簡単なアニメーション
マウスオーバー時のみ下線がアニメーションで表示される動きのサンプルです。
要素自体のborder-bottomで実装するのが難しいため、after擬似クラスを利用して要素の後ろに新しい内容を作成し、その内容に対するborder-bottomを動かします。
after擬似クラスとは
after擬似クラスは要素内の後ろに新しく内容を挿入する、cssの擬似クラスです。
セレクタ で指定する要素の後ろに「:after」と記述することで、内容を作成することができます。
具体的な内容の記述はcontentプロパティの値として記述します。
記述例（h1要素にafter擬似クラスを適用）
h1{
color: #f00;
}
h1:after{
content: "！";
}
上記の記述でh1要素に記述した内容の後ろに「!」が付与されます。
contentプロパティの値を””とすれば目に見えない内容が挿入されます。
その内容を利用して以下の記述のようにすることでアニメーションが実装されます。（全てコピペで実装できます。）
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSSのborderによるアニメーション</title>
<style media="screen">
h1{
color: #f00;
position: relative;
width: 50%;
}
h1:after{
position: absolute;
bottom: -0.5em;
left: 0;
content: "";
width: 0;
border-bottom: 5px #f00 solid;
transition: 0.5s
}
h1:hover:after{
width: 100%;
border-bottom: 5px #ff0 solid;
}
</style>
</head>
<body>
<h1>sample title</h1>
</body>
</html>
