CSSでbeforeとafterの使い方

2016/12/16 その他

今さらなんだけど、CSSのbeforeとafterの使い方。自分用メモなので、大した説明もなしで実例だけ。

css_before_after.html<html>
<head>
<style type="text/css">
.icon-circle:before { 
  content: url(circle.png);
}
.icon-square:after { 
  content: url(square.png);
}
.mylist-style:before {
  content: "■";
}
</style>
</head>
<body>

<h1><span class="icon-circle">Hello world!</span></h1>
<h1><span class="icon-square">Hello world!</span></h1>

<p>都道府県リスト</p>
<p><span class="mylist-style">北海道</span></p>
<p><span class="mylist-style">東京都</span></p>
<p><span class="mylist-style">沖縄県</span></p>

</body>
</html>

上のHTMLを表示するとこうなる。

ファイル構成。