:after擬似要素 …… 要素の直後に内容を挿入する
![Internet Explorer8](../images/b_i8.gif)
![Netscape6](../images/b_n6.gif)
![Netscape7](../images/b_n7.gif)
![Netscape8](../images/b_n8.gif)
![Opera6](../images/b_o6.gif)
![Opera7](../images/b_o7.gif)
![Opera8](../images/b_o8.gif)
![Firefox1](../images/b_f1.gif)
![Firefox2](../images/b_f2.gif)
広告
:after擬似要素は、要素の直後に内容を挿入する際に使用します。
挿入内容はcontentプロパティで指定しますが、例えば、文字列・引用符・カウンタ・画像・音声などを挿入することができます。
- 書式
- 要素名:after {プロパティ名:値;}
- 適用対象
- 要素の直後
h2:before {content:"★";}
strong:before {content:"『";}
strong:after {content:"』";}
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<h2>今日のお天気</h2>
<p>今日は<strong>晴れ</strong>です。</p>
<h2>明日のお天気</h2>
<p>明日は<strong>雨</strong>です。</p>
</body>
</html>
↓↓↓
今日のお天気
今日は晴れです。
明日のお天気
明日は雨です。
広告