[CSS] :: before / :: after仮想要素

:: beforeと:: afterは CSS仮想要素として、仮想要素を使用して、どの要素（element）の前後にテキストや画像を追加することができます。

基本的な文法

たとえば、次のような簡単なHtmlコードがある場合

<p>첫 번째 문장입니다.</p>

次のような形式で、仮想要素を使用することができます。

p::before {
content: "이것은 ";
font-style: italic;
font-weight: bold;
}

これにより、次のように画面に表示されます。

アイコンを追加する

仮に WordPressヘッダーにサイトのタイトルがテキストになっている場合は、このサイトのタイトルの前にアイコンを追加する場合を考えてみることができます。 またはサイドバーの任意の項目の前にアイコンを追加したい場合もあります。 このような場合に、仮想要素を使用すると、簡単にテキストの前や、特定の要素の前にアイコンを追加することができます。

サンプル CSS：

p::before {
content: "";
display: block;
background: url("icon_경로") no-repeat;
width: 25px;
height: 25px;
float: left;
margin: 0 5px 0 0;
}

floatプロパティのクリア

例えば、次のようなHtmlコードとCSSコードを使用している場合：

HTML コード

<a href="#">Home</a>
<a href="#">제품</a>
<p>첫 번째 문장입니다. 텍스트....</p>

CSS コード

a {
float: left;
display: block;
width: 100px;
background-color: yellow;
border: 1px solid grey;
margin: 5px;
text-align: center;
text-decoration: none;
}

上記のような場合floatの使用により、予期せぬ結果が出ることがあります。

この場合、:: before擬似要素を使用してfloat属性を消去（clear）することができます。

p::before {
content: "";
display: block;
clear: both;
}

これにより、次のように表示されます。

デモ： http://jsfiddle.net/4edbv96r/7/ （出典： http://krasimirtsonev.com)

:: before / :: after仮想要素の基本的な内容は、 CSS-Tricksページを参照してください。