CSS 疑似要素のサンプル

CSSの疑似要素のサンプルです。
::first-line、::first-letter、::before、::afterについてです。

目次

1..::first-line

  • 指定した要素の最初の1行目にスタイルを適用します。
  • CSS3では::first-lineとコロンを2つ記述します。CSS2では:first-lineのようにコロン1つでした。
  • 以下はMDNの疑似要素::first-lineのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/::first-line

コード

2行目は、::first-lineを指定しています。
8,14行目は、最初の1行目なので文字は赤になります。

<style>
#d1 > .test1::first-line {
	color:red;
}
</style>
<body >
<div id="d1">
	<p class="test1">テスト1-1<br>
	テスト1-2</p>

	<p>テスト1-3<br>
	テスト1-4</p>

	<p class="test1">テスト1-5<br>
	テスト1-6</p>
</div>
</body>

サンプル

上記コードのサンプルです。

テスト1-1
テスト1-2

テスト1-3
テスト1-4

テスト1-5
テスト1-6

2.::first-letter

  • 指定した要素の最初の1文字目にスタイルを適用します。
  • CSS3では::first-letterとコロンを2つ記述します。CSS2では:first-letterのようにコロン1つでした。
  • 以下はMDNの疑似要素::first-letterのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/::first-letter

コード

2行目は、::first-letterを指定しています。
8,14行目は、最初の1文字目が赤になります。

<style>
#d2 > .test1::first-letter {
	color:red;
}
</style>
<body >
<div id="d2">
	<p class="test1">テスト1-1<br>
	テスト1-2</p>

	<p>テスト1-3<br>
	テスト1-4</p>

	<p class="test1">テスト1-5<br>
	テスト1-6</p>
</div>
</body>

サンプル

上記コードのサンプルです。

テスト1-1
テスト1-2

テスト1-3
テスト1-4

テスト1-5
テスト1-6

3.::before

  • 指定した要素の開始タグの後にスタイルを適用します。
  • CSS3では、::beforeとコロンを2つ記述します。CSS2では、:beforeのようにコロン1つでした。
  • 以下はMDNの疑似要素::beforeのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/::before

コード

2行目は、::beforeを指定しています。
9,10,12行目は、P要素の開始タグの後に"こんにちは"という文字が表示されます。(イメージ図参照)

<style>
#d3 > .test1::before {
	content:" こんにちは "; 
	color:red;
}
</style>
<body >
<div id="d3">
	<p class="test1">テスト1</p>
	<p class="test1">テスト2</p>
	<p >テスト3</p>
	<p class="test1">テスト4</p>
</div>
</body>

イメージ図

上記コード実行時の::beforeの位置です。
P要素の開始タグの後に::beforeが設置されます。画面の表示では::beforeの箇所に文言が表示されます。

サンプル

以下は、上記コードのサンプルです。

テスト1

テスト2

テスト3

テスト4

3-1.::beforeを任意の位置に移動させる

  • 以下の指定をすると::beforeを指定した要素を任意の位置に移動できます。親要素の位置が基準になります。
    ::beforeを指定した要素の親要素にpositionプロパティのrelativeを指定
    ::beforeを指定した要素にpositionプロパティのabsoluteと位置のプロパティ(topとleftまたはbottomとright)を指定

コード

3行目にpositionプロパティのrelativeを指定しています。
6行目にpositionプロパティのabsoluteを指定しています。
9,10行目にtopとleftプロパティを指定しています。

<style>
#d3{
	position:relative;
}
#d3 > .test1::before {
	position: absolute;
	content:" こんにちは "; 
	color:red;
	top:30px;
	left:50px;
}
</style>
<body >
<div id="d3">
	<p class="test1">テスト1</p>
</div>
</body>

サンプル

上記コードのサンプルです。
14行目の親要素のdiv(id=d3)を基準にして、指定した値の分ずれています。
top:30px・・・基準の上辺までの距離を30pxとする。(下にずれる)
left:50px・・・基準の左辺までの距離を50pxとする。(右にずれる)

4.::after

  • 指定した要素の終了タグの前にスタイルを適用します。
  • CSS3では、::afterとコロンを2つ記述します。CSS2では、:afterのようにコロン1つでした。
  • 以下はMDNの疑似要素::afterのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/::after

コード

2行目は、::afterを指定しています。
9,10,12行目は、P要素の終了タグの前に"こんにちは"という文字が表示されます。(イメージ図参照)

<style>
#d4 > .test1::after {
	content:" こんにちは "; 
	color:red;
}
</style>
<body >
<div id="d4">
	<p class="test1">テスト1</p>
	<p class="test1">テスト2</p>
	<p >テスト3</p>
	<p class="test1">テスト4</p>
</div>
</body>

イメージ図

上記コード実行時の::afterの位置です。
P要素の終了タグの前に::afterが設置されます。画面の表示では::afterの箇所に文言が表示されます。

サンプル

上記コードのサンプルです。

テスト1

テスト2

テスト3

テスト4

4-1.::afterを任意の位置に移動させる

  • 以下の指定をすると::afterを指定した要素を任意の位置に移動できます。親要素の位置が基準になります。
    ::beforeを指定した要素の親要素にpositionプロパティのrelativeを指定
    ::beforeを指定した要素にpositionプロパティのabsoluteと位置のプロパティ(topとleftまたはbottomとright)を指定

コード

3行目にpositionプロパティのrelativeを指定しています。
6行目にpositionプロパティのabsoluteを指定しています。
9,10行目にtopとleftプロパティを指定しています。

<style>
#d4{
	position:relative;
}
#d4 > .test1::after {
	position: absolute;
	content:" こんにちは "; 
	color:red;
	top:30px;
	left:50px;
}
</style>
<body >
<div id="d4">
	<p class="test1">テスト1</p>
</div>
</body>

サンプル

上記コードのサンプルです。
14行目の親要素のdiv(id=d4)を基準にして、指定した値の分ずれています。
top:30px・・・基準の上辺までの距離を30pxとする。(下にずれる)
left:50px・・・基準の左辺までの距離を50pxとする。(右にずれる)

関連の記事

CSS セレクタの一覧
CSS セレクタを組み合わせて使うサンプル(子孫セレクタ等)
CSS 属性セレクタのサンプル
CSS 疑似クラスのサンプル1
CSS 疑似クラスのサンプル2(n番目にCSSを適用等)
CSS ボックスの配置のサンプル(positionのrelative)
CSS ボックスの配置のサンプル(positionのabsolute)




△上に戻る