:after擬似要素 …… 要素の直後に内容を挿入する
広告
: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>
↓↓↓
今日のお天気
今日は晴れです。
明日のお天気
明日は雨です。
広告