[新着] Webテンプレートを仮オープンしました
content は、要素の前後に内容（文字列や画像等）を追加する際に使用するプロパティです。
このプロパティは、疑似要素の before または after と組み合わせて使用します。
p:before {
content: url(image/icon.gif);
}
p:after {
content: "追加テキスト";
}
| content | 追加する内容を指定します |
|---|
【追加する内容】
■文字列
文字列を追加する場合は、追加したい文字列を次のような形式で指定します。
content: "追加するテキスト";
■画像や音声
画像や音声を追加する場合は、追加したいデータのURLを次のような形式で指定します。
content: url(image/example.gif);
■その他
上記の他、カウンタ、属性値、引用符などに関する指定もありますが、ここでは省かせていただきます。
以下の使用例では、段落（p要素）の直前と直後に対して、内容（画像とテキスト）の追加を指定しています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p:before {
content: url(image/icon.gif);
}
p:after {
content: "【終了】";
color: red;
}
-->
</style>
</head>
<body>
<p>段落の直前に画像、直後にテキストを追加してみました。</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
段落の直前に画像、直後にテキストを追加してみました。
