ホーム >>> HTML整理ノート

:before／:after　擬似要素

指定した要素の直前(:before)／直後(:after)に文字や画像を挿入する。挿入内容はcontentプロパティで指定する。

(書式)
　要素名:before {content:"テキスト"}　･･･要素の直前に文字を挿入
　要素名:before {content:url("画像のurl")}　･･･要素の直前に画像を挿入
　(:after も同様）

Sample

日本の高い山ランキング

  1. 富士山　（3776m)
  2. 北岳(山梨県)　(3193m)
  3. 奥穂高岳(長野・岐阜)　(3190m)
  4. 間ノ岳(山梨・静岡)　(3189m)

日本の長い川ランキング

  • 1)　信濃川　(367km)
  • 2)　利根川　(322km)
  • 3)　石狩川　(268km)

Sample Source......................................................................>>>

<style type="text/css">
　div.sample p:before {content:"■"}
　div.sample p:after {content:"･･･〜■"}
　div.sample .top:before {content:url("../../images/anime/anistar.gif")}
　div.sample .top:after {content:"〜〜 (^_-)-☆"}
</style>
</head>

<body>
<div class="sample">
　<p>日本の高い山ランキング</p>
　<ol>
  　　<li class="top">富士山　（3776m)
  　　<li>北岳(山梨県)　(3193m)
  　　<li>奥穂高岳(長野・岐阜)　(3190m)
  　　<li>間ノ岳(山梨・静岡)　(3189m)
　</ol>
　<p>日本の長い川ランキング</p>
　<ul>
  　　<li class="top">1)　信濃川　(367km)
  　　<li>2)　利根川　(322km)
  　　<li>3)　石狩川　(268km)
　</ul>
</div>