HTML-LABS : CSS（スタイルシート）解説 - 要素の前後に文字列や画像を表示する方法 : content

・直前に文字列を表示する場合
　　要素名:before{ content: "文字列" }

・直前に画像を表示する場合
　　要素名:before{ content: url(画像のURL) }

・直後に文字列を表示する場合
　　要素名:after{ content: "文字列" }

・直後に画像を表示する場合
　　要素名:after{ content: url(画像のURL) }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>スタイルシート(CSS) = 要素の前後に文字列や画像を表示する方法 =</title>

<style type="text/css">
<!--
#id01:before
{  content: "[HTML-LABS]";
   background-color: #ff0000;
   color: #ffffff;
}
#id02:after
{  content: "[HTML-LABS]";
   background-color: #0000ff;
   color: #ffffff;
}
-->
</style>

</head>
<body>
    スタイルシート(CSS) = 要素の前後に文字列や画像を表示する方法 =
    <p id="id01">このp要素の直前に文字列を表示します。</p>
    <p id="id02">このp要素の直後に文字列を表示します。</p>
</body>
</html>