CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの::beforeと::after擬似要素の使い方を実例で解説

CSSの ::before と ::after 擬似要素は、それぞれ対象となる要素の「前」と「後」にコンテンツを挿入するために使用します。これらの擬似要素を使うことで、HTMLを変更することなく、装飾的なテキストや図形などを追加できます。

基本構文

::before は要素の直前、::after は要素の直後にコンテンツを挿入します。どちらも必ず content プロパティが必要です。空文字列（""）を指定すれば、テキストではなく装飾用の図形として活用することも可能です。

セレクタ::before {
  content: "挿入する内容";
}

セレクタ::after {
  content: "挿入する内容";
}

例1：テキストの挿入

CSS の ::before および ::after 擬似要素の基本的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
    content: " BUZZINGA!";
    background: orange;
    padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
    content: "Harry:";
    background-color: lightblue;
    font-weight: bold;
    padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Nobody: </p>
<p>Sheldon Cooper:</p>
</div><hr><div>
<p><q>Death Eaters arrive</q></p>
<p><q>Expecto Patronum!</q></p>
</div>
</body>
</html>

この例では、最初の段落の後にオレンジ色の背景付きで「BUZZINGA!」というテキストが追加され、2番目のブロックでは引用文の前に水色の背景を持つ「Harry:」というラベルが表示されます。

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSの::beforeと::after擬似要素の使い方を実例で解説

例2：陰陽マーク（シンボル）の作成

続いて、::before と ::after を組み合わせて、CSSだけで陰陽（イン・ヤン）マークを描画する応用例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
#yinyangSymbol {
    width: 100px;
    height: 50px;
    background: #fff;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yinyangSymbol::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
    border: 18px solid #000;
    border-radius: 100%;
    width: 14px;
    height: 14px;
}
#yinyangSymbol::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #fff;
    border-radius:100%;
    width: 14px;
    height: 14px;
}
div{
    width: 50%;
    margin: 10px auto;
    border:4px solid black;
}
#text {
    border: 4px solid black;
    background-color: grey;
    color: white;
    text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div>
<div id="yinyangSymbol"></div>
</div>
<div id="text">Be Centered &amp; Balanced</div>
</div>
</body>
</html>

この例では、親要素に白黒の境界線を持つ円形を作り、::before で黒い円、::after で白い円を絶対配置（position: absolute）によって重ねることで、画像を使用せずに陰陽マークを表現しています。

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSの::beforeと::after擬似要素の使い方を実例で解説

まとめ

::before と ::after 擬似要素は、単純なテキストの挿入から、CSSだけで図形を描く高度なテクニックまで幅広く活用できる強力な機能です。content プロパティとの組み合わせや position プロパティによる配置を理解すると、HTMLの構造を変更せずに表現力豊かなデザインが実現できます。

  1. CSSの::first-letter疑似要素とは？使い方とサンプルコードを解説

    CSSの::first-letter疑似要素は、要素内のコンテンツの最初の一文字だけを選択し、そこにのみスタイルを適用できるセレクターです。雑誌や新聞でよく見かける「ドロップキャップ（先頭文字を大きく装飾する表現）」を、Webページでも手軽に実現できます。ただし注意点として、この疑似要素はインラインレベルの要素には適用できません。スタイルを反映させるには、対象となる要素がブロックレベルである必要があります。主な特徴ブロックレベル要素の最初の一文字にのみスタイルが適用されるfont-size、color、background-color、padding などのプロパティが自由に組み合わせられるイ

  2. CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード

    CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da