今回は、「擬似要素を使ってテキストに下線を引く方法」を紹介します。
「text-decoration:」でもテキストに下線を引くことはできますが、擬似要素でもできるようになりましょう。
擬似要素を使ってテキストに下線を引く方法【CSS】
まず完成形はこちら。
それではHTML/CSSと順番にコードを見ていきましょう
HTML
HTMLコードはこちら。
<div> <a href="">下線を引きますよ</a> </div>
divに関しては、今回は中央寄せにして見やすいようにするために使っているので、擬似要素を使って下線を引きたい場合はなしでOK。
そして、aタグを用意します。
CSS
CSSコードはこちら。
div {
text-align: center;
margin-top: 300px;
}
a {
position: relative;
text-decoration: none;
color: black;
}
a::after {
content:"";
display: inline-block;
height: 2px;
background-color: red;
position:absolute;
bottom: -10px;
left: 0;
width: 100%;
}
◎6行目〜10行目
まずはaタグに「position: relative;」を指定します。
そしてアンダーラインを消し、文字色を黒に。
◎12行目〜21行目
aタグの擬似要素を作ります。
「content:””;」で空要素を作成。
「display: inline-block;」でインラインブロック要素にする。（「display: block;」でもOK。）
「background-color: red;」で下線の色をつける。
「position:absolute;」で絶対配置にする。
「bottom: -10px;」と「left: 0;」で下線の位置を決める。
「width: 100%;」をつける。
まとめ
以上が、「擬似要素を使ってテキストに下線を引く方法」でした。
実際の現場でもよく使う手法なので、是非マスターしておきたいところです。
