CSSの擬似要素の使い方！::beforeと::afterに限定して、よく使うケースをコーディング例を使い説明します。

【htmlで表現する場合】

コーディング結果

html

<p><span>『　</span>普通のコーディング<span>　』</span></p>

CSS

なし

【CSSの疑似要素で表現する場合】

コーディング結果

html

<p>疑似要素のコーディング</p>

CSS

p::before {
  content: '『　';
  color: red;
}
p::after {
  content: '　』';
  color: red;
}

①記事などの文章を記述する領域（緑色）、ラベル（黄色）で表示します。

➁ラベル（黄色）を文章（緑色）の領域の左上に固定して表示します。

html

<h2 class="text">この記事にラベルをつけます。</h2>

CSS

.text{
  width:500px;
  height:100px;
  padding-top:50px;
  padding-left:20px;
  background-color:lightgreen;
  border: 2px solid green;
  position:relative;
}

.text::before{
  content:"ラベル";
  width:100px;
  height:30px;
  text-align:center;
  vertical-align:middle;
  background-color:lightyellow;
  border:2px solid yellow;
  position:absolute;
  top:0;
  left:0;
}

コーディング手順

①htmlでは、文章だけを記述します。

➁CSSで擬似要素に、「ラベル」とテキストを記述します。

content に、ラベルと記述します。

③文章の要素 .text を基準 relative にします。

④疑似要素 .text::before の位置を absolute で指定します。

See the Pen 擬似要素 by Seiji Nakamura (@sjnkmr_777) on CodePen.

①背景色を赤色で表示します。

➁赤色をホバーしている時だけ中に白色が浮き上がってきます。

html

<div class="box"></div>

CSS

.box{
  background-color:red;
  position: relative;
  width:500px;
  height:100px;
}
.box:hover{
  cursor: pointer;
}
.box:hover.box::before {
  content: "";
  background-color: white;
  width: 460px;
  height: 60px;
  position: absolute;
  top: 20px;
  left: 20px;
}

コーディング手順

①htmlでは、divタグを定義するだけです。

➁divタグ .box の背景色を赤色に表示します。

③白色の領域を擬似要素で表示するため、content を空に指定します。

④divタグ .box を基準 relative にします。

⑤疑似要素 .box::before の位置を absolute で指定します。

⑥ホバーしたとき、疑似要素を表示させます。

①左側にりんごの画像を表示します。

➁文章の左側にスペースを取ります。

html

<p class="apple">contentにりんごの画像の場合<br>画像提供は、by susan-lu4esm pixabay</p>

CSS

.apple{
  color:red;
  width:500px;
  height:100px;
  position:relative;
  padding-left: 60px;
  border: 1px solid black;
}
.apple::before{
  content: url(./fig2.jpg);
  vertical-align: middle;
  transform: scale(0.078);
  border: 1px solid red;
  position: absolute;
  top:-300px;
  left: -295px;
}

コーディング手順

①htmlには、apple に文書のみ記述します。

➁CSSの疑似要素 .apple::before の content に画像を読み込みます。

③画像の大きさを transform:scale( ); で調整します。

④.apple を基準 relative にします。

⑤疑似要素 .apple::before の位置を absolute で指定します。

①左側にりんごの画像を表示します。

➁文章の左側にスペースを取ります。

html

<p class="apple">contentは空、backgroundにりんごの画像の場合<br>画像提供は、by susan-lu4esm pixabay</p>

CSS

.apple{
  color:red;
  width:500px;
  height:100px;
  border:1px solid black;
  position: relative;
  padding-left: 60px;
}
.apple::before{
  content: "";
  width: 50px;
  height: 50px;
  background: url(./fig2.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  border:1px solid red;
  position: absolute;
  top: 0px;
  left: 0px;
}

コーディング手順

①htmlには、apple に文書のみ記述します。

➁CSSの疑似要素 .apple::before の content は空にします。

③背景に画像を指定します。

④画像の大きさは、疑似要素の width,height で指定します。

⑤.apple を基準 relative にします。

⑥疑似要素 .apple::before の位置を absolute で指定します。