:before擬似要素と:after擬似要素

CSS

新人のMです。 毎日ネタ考えるの大変ですね。

jsの話が続いてるので、今日はCSSの話にしてみたいと思います。

:before擬似要素と:after擬似要素

対象の要素の前後に擬似的な内容を追加してくれる擬似要素です

このような形で指定すると、「beforePafter]のように表示されます。

<html>
<head>
<style type="text/css">
p:before {
    content: "before";
}
p:after {
    content: "after";
}
</style>
</head>
<body>
    <p>P</p>
</body>
</html>

contentには、文字列の他に、URL(画像)、要素の属性値、カウンタが指定できます。 例えば、リンクの前にアイコンを表示させたり、リンクの後ろにURLを表示させたり、タイトルの前後に飾りをつけたりするのに使えます。

簡単Tooltip

:hover擬似クラスといっしょに使うと簡単にTooltipが実装できたりします。

<html>
<head>
<style type="text/css">
.content {
    display: inline;
    position: relative;
}
.content:hover:after {
    content: attr(data-content);
    background: yellow;
    position: absolute;
    top: 50%;
    left 50%;
}
</style>
</head>
<body>
   <p class="content" data-content="content">P</p>
</body>
</html>

要素にマウスをかざすと、説明が要素の上に表示されます。

まとめ

:before擬似要素と:after擬似要素の簡単な紹介を行いました。 簡単なTooltipの作り方の紹介を行いました。