CSSによるライン引きのアニメーション
CSSで実装するライン引きのアニメーションを紹介します。
複数行には対応していませんので、あらかじめご了承ください。
目次
共通のHTMLとCSS
ラインを引く文章の基本のHTMLとCSSです。
HTML
<a href="#">これはテスト文章です。</a>CSS
a {
display: inline-block;
text-decoration: none;
color: #000;
}共通のHTMLとCSS
ホバーで下線を引く 1
文章にマウスを乗せると、文章に下線が引かれます。
CSS
a {
position: relative;
}
a::before {
content: '';
position: absolute;
bottom: -3px;
left: 0;
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s;
}
a:hover::before {
width: 100%;
}ホバーで下線を引く 1
ホバーで下線を引く 2
「ホバーで下線を引く 1」と同じように下線が引かれますが、こちらはマウスを外したときに左から右に向かって下線が消えます。
CSS
a {
position: relative;
}
a::before {
content: '';
position: absolute;
bottom: -3px;
right: 0;
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s;
}
a:hover::before {
left: 0;
width: 100%;
}ホバーで下線を引く 2
ホバーで中央から下線を引く 1
文章にマウスを乗せると、文章に中央から下線が引かれます。
CSS
a {
position: relative;
}
a::before,
a::after {
content: '';
position: absolute;
bottom: -3px;
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s;
}
a::before {
right: 50%;
}
a::after {
left: 50%;
}
a:hover::before,
a:hover::after {
width: 50%;
}ホバーで中央から下線を引く 1
ホバーで中央から下線を引く 2
「ホバーで中央から下線を引く 1」と同じように下線が引かれますが、こちらはマウスを外したときに内側から外側に向かって下線が消えます。
CSS
a {
position: relative;
}
a::before,
a::after {
content: '';
position: absolute;
bottom: -3px;
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s;
}
a::before {
left: 0;
}
a::after {
right: 0;
}
a:hover::before,
a:hover::after {
width: 50%;
}
a:hover::before {
left: 50%;
}
a:hover::after {
right: 50%;
}ホバーで中央から下線を引く 2
ホバーで蛍光ペンを引く
文章にマウスを乗せると、文章に蛍光ペン風の線が引かれます。
CSS
a {
display: inline-block;
background: linear-gradient(to right, #ff0 50%, transparent 50%);
background-position: 100% bottom;
background-size: 200% 70%;
background-repeat: no-repeat;
transition: background-position 0.4s;
}
a:hover {
background-position: 0% bottom;
}ホバーで蛍光ペンを引く