CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)

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

1．::first-line
2．::first-letter
3．::before
　3-1．::beforeを任意の位置に移動させる
4．::after
　4-1．::afterを任意の位置に移動させる

１．.::first-line

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

コード

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

<style>
.t11::first-line {
	color:red;
}
</style>
<body >

	<p class="t11">テスト1-1<br>
	テスト1-2</p>

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

	<p class="t11">テスト1-5<br>
	テスト1-6</p>

</body>

サンプル

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

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

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

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

２．::first-letter

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

コード

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

<style>
.t21::first-letter {
	color:red;
}
</style>
<body >

	<p class="t21">テスト1-1<br>
	テスト1-2</p>

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

	<p class="t21">テスト1-5<br>
	テスト1-6</p>

</body>

サンプル

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

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

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

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

３．::before

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

コード

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

<style>
.t31::before {
	content:" こんにちは "; 
	color:red;
}
</style>
<body >

	<p class="t31">テスト1</p>
	<p class="t31">テスト2</p>
	<p >テスト3</p>
	<p class="t31">テスト4</p>

</body>

イメージ図

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

サンプル

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

テスト1

テスト2

テスト3

テスト4

３－１．::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とする。(右にずれる)

４．::after

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

コード

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

<style>
.t41::after {
	content:" こんにちは "; 
	color:red;
}
</style>
<body >

	<p class="t41">テスト1</p>
	<p class="t41">テスト2</p>
	<p >テスト3</p>
	<p class="t41">テスト4</p>

</body>

イメージ図

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

サンプル

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

テスト1

テスト2

テスト3

テスト4

４－１．::afterを任意の位置に移動させる

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

コード

<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とする。(右にずれる)