memocarilog

今まであまり知らなかったのですが、contentプロパティを使うと自動的に文字や画像を自動的に挿入したりできて便利ですね。最近調べて知った、contentプロパティを使用した表示の仕方をいくつか書きだしてみました。

IE8以上でないとcontentプロパティを使った、:beforeや :after擬似要素は対応していませんが、「 IE9.js」を使用すれば使える範囲も広がります。ちなみにIE9.jsを適用しても5.の連番表示は8以下では表示できませんでした。

1. リストの最初の要素に”★new!”を表示する

更新記事一覧などで最新の記事に自動的に”★new!”等の表示や画像を表示する事ができます。文字だけでなく画像も表示できます。Webフォントを使えばいろんなアイコンが表示できますね。

デモ

See the Pen リストの最初の要素に”★new!”を表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<ul>
	<li>商品追加しました！</li>
	<li>商品追加しました！</li>
	<li>商品追加しました！</li>
	<li>商品追加しました！</li>
</ul>

CSS

li:first-child:after{
	content: "★new!";
	margin-left: 5px;     
	font-size: small;     
	color: #f619b0;     
	vertical-align: text-top; 
}

2. リンクされているurlを表示する

attrでhref属性を指定し、リンクしたテキストの後ろへ、リンクされているURLを自動的に表示します。

デモ

See the Pen リンクされているurlを表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<P><a href="https://memocarilog.info/">memocarilog</a></P>

CSS

a:after { 
	content: " [ "attr(href)" ] ";  
}

3. パンくずリストの表示

パンくずリストの”＞”の部分を隣接セレクタを使って、二個目以降のliの前に挿入しています。HTMLに余計なものを記入しなくて済むのでいいですね。

デモ

See the Pen パンくずリストの表示サンプル by Saomocari (@Saomocari) on CodePen.

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Content1</a></li>
    <li>現在のページ</li>
</ul>	

CSS

ul{
	padding: 10px;
	overflow: auto;
	_zoom:1
}
li {
	float: left;
	list-style: none;
}
li + li:before {
	margin: 0 8px;
	content: ">";
}

4. リンクのtitleをキャプションのように表示する

attr で title 属性を指定し、画像の後に title のテキストを挿入してキャプションのように表示しています。

デモ

See the Pen リンクのtitleをキャプションのように表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<p><a href="#" title="ダックスフンド"><img src="dachs.jpg" alt="ダックス"/></a></p>

CSS

p a{
	display: block;
	text-decoration: none;
	width: 300px;
}
p a:after{
 display: block;
 content: attr(title);
 text-align: center;
 color: #666;
 font-size: small;
  }

5. 連番を表示する

contentプロパティを使うと文字列や画像だけでなく、連番も追加できます。親要素に counter-increment: 任意の文字列;　を指定し、counter-increment が指定されている要素が隣り合っていないと連番表示できませんのでご注意ください。

デモ

See the Pen 連番を表示するサンプル by Saomocari (@Saomocari) on CodePen.

HTML

<h3>タイトル</h3>
      <p>略</p>
<h3>タイトル</h3>
      <p>略</p>     
<h3>タイトル</h3>
      <p>略</p>
<h3>タイトル</h3>
      <p>略</p>

CSS

h3{
  counter-increment: section;
}
h3:after{
    content: " (" counter(section) ")";
}
h3{
   counter-increment: section;
   margin: 13px 0 3px;
}