CSS擬似クラス、擬似要素の使い方【随時追記】 |

投稿日 : 2019年4月28日

CSS擬似クラス、擬似要素の使い方【随時追記】

HTML・CSS|プログラミング

こんにちは、yutaです。

タイトル通り、擬似要素の使い方についてのメモです。

※僕も学びながら、随時追記していく予定です。

1.擬似クラス、擬似要素とは。
2.擬似クラス「hover」
3.擬似要素「before」と「after」

1.擬似クラス、擬似要素とは。

CSSで、<div>や<span>などの要素あるいは、IDやクラスに対して、「:」または「::」をつけたものを擬似クラスまたは擬似要素と言います。

擬似クラスでは、コロンが1つ
擬似要素では、コロンが2つ
付きます。

擬似クラス例) span:hover
擬似要素例) h2::before

2.擬似クラス「hover」

有名な擬似クラスとしてhoverがあります。hoverは、要素にマウスカーソルを合わせた時(ホバー時)に適用されるスタイルです。

以下は、マウスカーソルを「すぱん」という文字の上に置くと文字色がターコイズに変化する例です。

[HTML]
<span>すぱん</span>

[CSS]
span:hover{
    color: turquoise;
}

メニューボタンにカーソルを合わせたら色を変えたり、ボーダーを付けるなど色々と応用ができそうですね。

3.擬似要素「before」と「after」

beforeとafterは、擬似要素のひとつでこれにより仮の要素を作ることができます。

書式

擬似要素beforeとafterの書式を例で示します。

div::before{
 content: '擬似要素の内容';
 これ以降にcolorなどのスタイルを記述
}

#id123::after{
 content: '擬似要素の内容';
 これ以降にcolorなどのスタイルを記述
}

※コロン’:’は1つでも2つでも良いようですが、現在は2つの方が推奨されています。

contentの中に、例えば「☑️」と記述すると、beforeでは要素の直前に☑️が表示され、afterでは直後に表示されます。

[HTML]
<span>すぱん</span>

[CSS]
span::before{
 content: '☑️';
}

span::after{
 content: '⚠️';
}

擬似要素でアンダーライン

少し変わった使い方ですが、擬似要素を使って文字にアンダーラインを引くこともできます。通常のアンダーラインでは、文字の長さ=アンダーラインの長さですが、擬似要素でやると長さを自由に変えられます。

[HTML]
<span>すぱん</span>

[CSS]
body{
    position: relative;
}
span::before{
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 30px; /*ここでアンダーラインの長さを決める*/
    height: 1px; 
    border-top: 1px solid black; /*アンダーラインのスタイルを決める*/
}