擬似要素 (pseudo element)

擬似要素とは、要素の一部に適用できるセレクタです。

構文

selector::pseudo-element {
  property: value;
}

CSS2ではpseudo-elementの前のコロンが1つですが、CSS3からはコロンが2つとなっています。これは擬似クラスと区別するための記述法ですが、たいていのブラウザはいずれにも対応しています。Notes - Pseudo-elements - CSS | MDN

:first-letter、:first-line

:first-letterでは要素の1文字目、:first-lineでは1行目にだけスタイルを適用できます。

p:first-letter {
    font-size: 2em;
}

p:first-line {
    color: red;
}

:before、:after

img:after {
    content: attr(alt);
}

content属性

:beforeや:afterと組み合わせることで、指定要素の前後に特定の内容を追加できます。Internet Explorerは、8以降でこの属性に対応します。ブラウザ実装状況 - content - CSS | MDN

#foo:before {
    content: '(';
}
#foo:after {
    content: ')';
}

属性値には下記の値を指定できます。

content: none;
content: normal;

content: 'string';      /* テキスト */
content: url(uri);      /* 外部リソースのURI */
content: counter(name); /* カウンター */

content: attr();

content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

content: 'string'

シングルクォートまたはダブルクォートで囲むことで、文字を挿入できます。文字は直接記述するか、CSSの構文に従いUTF-16の16進で記述します。<string> - CSS | MDN

#foo:before {
    content: 'あ';
}
#foo:after {
    content: '\3042'; /* UTF-16 */
}

content: 'あいう';

content: '\3042\3044\3046';

改行させる

文字をUnicodeで指定できることから、改行文字 (Line Feed) を挿入することで改行させられます。css3 - How to insert a line break before an element using CSS - Stack Overflow

:after {
    content: '\A';
}

または、

:after {
    content: '\A';
    white-space: pre;
}

content: url()

画像などの外部リソースを挿入できます。

#foo:before {
    content: url('sample.png');
}

垂直位置をそろえる

リソースの大きさによっては、挿入する前後の要素と位置が合わないことがあります。そのような場合にはvertical-alignで垂直位置を明示し、Internet ExplorerやChromeでもそれが適用されるようにdisplayも指定します。

#foo:before {
    content: url('sample.png');
    vertical-align: middle;
    display: inline-block;
}

content: counter()

数値を順番に挿入できます。Using CSS counters - CSS | MDN

使用する数値はcounter-resetで初期化し、counter-incrementで増加または減少させます。

• counter-reset - CSS | MDN
• counter-increment - CSS | MDN

body {
    counter-reset: counter1;
}
div:before {
    counter-increment: counter1;
    content: counter(counter1) '.';
}

<div>A</div>
<div>B</div>
<div>C</div>

content: attr()

content属性で挿入する値を、その要素の属性から指定できます。

#foo:after {
    content: attr(title);
    color: red;
}

<div id="foo" title="これ">title属性の値を、指定要素の後に表示する。</div>

追加する文字へのスタイルの適用

content属性で追加するテキストにもスタイルを設定できます。

<span style="color: red">color</span>
<span style="text-decoration: underline">text-decoration</span>

span:before {
    content: '■';
    color: blue;
    text-decoration: none;
}

ただしtext-decorationは例外で、下線を設定することはできても解除することはできません。

display:inline-blockとすることで下線を解除する方法もありますが、これもIEでは機能しません。css - “text-decoration” and the “:after” pseudo-element, revisited - Stack Overflow

span:before {
    content: '■';
    display: inline-block;
}

• 仕様
  • 構文
    • 長さの指定方法
    • 色の指定方法
    • @規則
  • セレクタ
    • 擬似クラス
    • 擬似要素
  • 継承
  • 詳細度
• 属性
  • ボックス
  • レイアウト
  • テキスト
  • リスト
  • テーブル
• 文書への適用方法
  • HTMLへの適用
  • 代替スタイルシート
• 最適化
• サンプルコード
  • ボックス内で左寄せや右寄せ
  • CSSで段組
  • ボックス内で下揃え
• ツール

• お問い合わせ
• プライバシーポリシー
• サイトマップ