疑似要素 (pseudo element)

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

要素 適用箇所 実装
:first-letter 要素の1文字目 CSS 1
:first-line 要素の1行目 CSS 2
:before 要素の前 CSS 2
:after 要素の後 CSS 2
:selection ユーザーによって選択された部分  
:backdrop   [実験的]

構文

selector::pseudo-element {
  property: value;
}
Syntax - Pseudo-elements - CSS | MDN

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

:first-letter、:first-line

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

1行目
2行目

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

p:first-line {
    color: red;
}

:before、:after

:beforeと:afterは置換要素 (Replaced element)、つまりimgやinputなどのCSSの範囲外で描画される要素に対しては機能しません。置換要素 - CSS | MDN

よって次のように、img要素の前後に内容を追加するような処理はできません。CSS :after not adding content to certain elements - Stack Overflow

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;
Syntax - content - CSS | MDN

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');
}
SAMPLE
垂直位置をそろえる

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

#foo:before {
    content: url('sample.png');
    vertical-align: middle;
    display: inline-block;
}
Vertically aligning CSS :before and :after content - Stack Overflow

content: counter()

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

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

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

たとえば、

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

に適用すると、

A
B
C

となります。

content: attr()

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

#foo:after {
    content: attr(title);
    color: red;
}
<div id="foo" title="これ">title属性の値を、指定要素の後に表示する。</div>
title属性の値を、指定要素の後に表示する。

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

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は例外で、下線を設定することはできても解除することはできません。

color text-decoration

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

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