CSSの擬似要素とは？基本的な擬似要素10選！使い方を解説！

【 2025/07/05 16:06 更新】

CSSの擬似要素とは？

CSSの擬似要素は、特定の要素を追加して、スタイルを反映できる仕組みです。

ポイント

擬似要素を使うと、HTMLタグで定義せずに要素が追加される。

擬似要素はたくさんの種類があるよ〜！

【 CSS擬似要素の書き方】

セレクタ::擬似要素名 {
　　　　スタイル
}

〜例〜
.example-class::before {
　　　　content: '⚫︎'; /* 要素の最初に'⚫︎'が入る */
}

セレクタとは

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
HTML上のどの要素を示すのかを定義します。

【セレクタの書き方】

CSSセレクタの種類

【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！

こじはなNote

CSS
擬似要素::before｜要素の先頭にコンテンツ(内容)を挿入

擬似要素beforeは、要素内の先頭にコンテンツ(内容)を挿入できます。

ここでのコンテンツ

ここでいうコンテンツとは、文字や装飾のことを指します。

displayプロパティの指定によってはblockやflexなど、要素の種類を変更できます。

【要素の種類に関する記事】

基本的なHTML要素の種類

【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！

こじはなNote

【 ::beforeの書き方】

セレクタ::before {
　　　　content: "文字"; /* 必須 */
　　　　その他スタイル...
}

〜例〜
.before-circle::before {
　　　　content: "⚫︎"; /* 要素の最初に"⚫︎"が入る */
}

【コード例】

【 HTML 】


<!-- 文字の黒丸 -->
<p class="before-circle">こんにちは！！</p>
<!-- 赤い丸 -->
<p class="before-circle-block">こんにちは！！</p>

【 CSS 】


.before-circle::before {
    content: "⚫︎"; /* 要素の最初に"⚫︎"が入る */
}

.before-circle-block::before {
    content: ""; /* 空文字 */

    /* ⚫をインラインブロック要素として作る */
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: red;
}

ブラウザで実行するとこんな感じです。

CSSの単位"em"とは

CSSのサイズ単位「em」とは、親要素のフォントサイズを基準とした単位です。

他にも色々なサイズ単位があります。

【 CSSのサイズ単位に関する記事】

CSSの基本なサイズ単位px,rem,em,%,vw,vh,vmin,vmaxについて解説

こじはなNote

display: inline-block;

displayプロパティには要素の種類を指定できます。
値"inline-block"は、inline要素（文章の一部）とblock要素の特徴を合わせ持つ要素となります。

【 inline-block要素の特徴】

inline要素のように前後が強制改行されない
width・height・margin・paddingなどblock要素用のプロパティが反映される

【基本的な要素の種類】

block ブロック	箱のようなイメージ。要素の前後が強制的に改行される。
inline インライン	文章の一部分のイメージ。要素の前後は改行されない。
inline-block インラインブロック	blockだけど改行されないイメージ。要素の前後は改行されない。
flex フレックス	flex要素内にある複数の要素を1列に並べたり、並べ方をカスタマイズできるブロック要素。要素の前後が強制的に改行される。【詳しく知りたい方はこちら】 CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！ \| こじはなNote

border-radius: サイズ;

border-radiusプロパティは角丸を指定できます。

値にサイズを指定して、どのくらい角を丸くするか指定できます。

CSS
擬似要素::after｜要素の末尾にコンテンツ(内容)を挿入

擬似要素afterは、要素内の末尾にコンテンツ(内容)を挿入できます。

ここでのコンテンツ

ここでいうコンテンツとは、文字や装飾のことを指します。

displayプロパティの指定によってはblockやflexなど、要素の種類を変更できます。

【要素の種類に関する記事】

基本的なHTML要素の種類

【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！

こじはなNote

【 ::afterの書き方】

セレクタ::after {
　　　　content: "文字"; /* 必須 */
　　　　その他スタイル...
}

〜例〜
.after-circle::after {
　　　　content: "⚫︎"; /* 要素の後ろに"⚫︎"が入る */
}

【コード例】

【 HTML 】


<!-- 文字の黒丸 -->
<p class="after-circle">こんにちは！！</p>
<!-- 赤い丸 -->
<p class="after-circle-block">こんにちは！！</p>

【 CSS 】


.after-circle::after {
    content: "⚫︎"; /* 要素の後ろに"⚫︎"が入る */
}

.after-circle-block::after {
    content: ""; /* 空文字 */

    /* ⚫をインラインブロック要素として作る */
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: red;
}

ブラウザで実行するとこんな感じです。

CSSの単位"em"とは

CSSのサイズ単位「em」とは、親要素のフォントサイズを基準とした単位です。

他にも色々なサイズ単位があります。

【 CSSのサイズ単位に関する記事】

CSSの基本なサイズ単位px,rem,em,%,vw,vh,vmin,vmaxについて解説

こじはなNote

display: inline-block;

displayプロパティには要素の種類を指定できます。
値"inline-block"は、inline要素（文章の一部）とblock要素の特徴を合わせ持つ要素となります。

【 inline-block要素の特徴】

inline要素のように前後が強制改行されない
width・height・margin・paddingなどblock要素用のプロパティが反映される

【基本的な要素の種類】

block ブロック	箱のようなイメージ。要素の前後が強制的に改行される。
inline インライン	文章の一部分のイメージ。要素の前後は改行されない。
inline-block インラインブロック	blockだけど改行されないイメージ。要素の前後は改行されない。
flex フレックス	flex要素内にある複数の要素を1列に並べたり、並べ方をカスタマイズできるブロック要素。要素の前後が強制的に改行される。【詳しく知りたい方はこちら】 CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！ \| こじはなNote

border-radius: サイズ;

border-radiusプロパティは角丸を指定できます。

値にサイズを指定して、どのくらい角を丸くするか指定できます。

CSS
擬似要素::first-line｜最初の1行にスタイル適用

擬似要素first-lineは、ブロック要素内の最初の1行にスタイル適用できます。

ブロック要素のみ適用

ブロック要素以外の要素には効きません。

【 ::first-lineの書き方】

セレクタ::first-line {
　　　　スタイル...
}

〜例〜
.first-line-test::first-line {
　　　　color: blue;
}

【コード例】

【 HTML 】


<p class="first-line-test">こんにちは！！<br>こじはなだよ〜！！</p>

【 CSS 】


.first-line-test::first-line {
    color: blue; /* 1行目が青文字になる */
}

ブラウザで実行するとこんな感じです。

CSS
擬似要素::first-letter｜最初の1文字にスタイル適用

擬似要素first-letterは、ブロック要素内の最初の1文字にスタイル適用できます。

ブロック要素のみ適用

ブロック要素以外の要素には効きません。

【 ::first-letterの書き方】

セレクタ::first-letter {
　　　　スタイル...
}

〜例〜
.first-letter-test::first-letter {
　　　　color: blue;
}

【コード例】

【 HTML 】


<p class="first-letter-test">こんにちは！！</p>

【 CSS 】


.first-letter-test::first-letter {
    color: blue; /* 1文字目が青文字になる */
}

ブラウザで実行するとこんな感じです。

CSS
擬似要素::selection｜ユーザーが選択したテキスト部分にスタイル適用

擬似要素selectionは、ユーザーが選択したテキスト部分にスタイル適用できます。

selectionで適用できるCSSプロパティには制限があり、基本的にcolor・background-color・text-shadow・caret-colorが使えます。

【 ::selectionの書き方】

セレクタ::selection {
　　　　スタイル...
}

〜例〜
.selection-test::selection {
　　　　color: blue;
}

【コード例】

【 HTML 】


<p class="selection-test">こんにちは！！<br>こじはなだよ〜〜！</p>

【 CSS 】


.selection-test::selection {
    color: blue; /* 選択部分が青文字になる */
}

ブラウザで実行するとこんな感じです。

実際に文字を選択してみてください！

CSS
擬似要素::placeholder｜プレースホルダーのテキストにスタイル適用

擬似要素placeholderは、プレースホルダーのテキストにスタイル適用できます。

【使えるinputタグのtype属性値】

type="text"：文字を入力できるテキストボックス。
type="password"：パスワード入力用のテキストボックス。
type="email"：メールアドレス入力用のテキストボックス。
type="tel"：電話番号入力用のテキストボックス。
type="search"：検索用のテキストボックス。
type="number"：数値入力用のテキストボックス。

【使えるタグ(inputタグ以外) 】

textareaタグ：複数行の文字を入力できるテキストボックス。

プレースホルダーとは

プレースホルダーとは、input要素やtextarea要素のテキストボックス内に、入力前に表示される薄い文字のことです。

placeholder属性にテキストを設定できます。

〜例〜

【使えるinputタグのtype属性値】

type="text"：文字を入力できるテキストボックス。
type="password"：パスワード入力用のテキストボックス。
type="email"：メールアドレス入力用のテキストボックス。
type="tel"：電話番号入力用のテキストボックス。
type="search"：検索用のテキストボックス。
type="number"：数値入力用のテキストボックス。

【使えるタグ(inputタグ以外) 】

textareaタグ：複数行の文字を入力できるテキストボックス。

inputタグとは

inputタグとは入力ができる要素です。
type属性に指定する値によって、様々な種類の入力要素になります。
formタグに内包して値を別の画面やプログラムに渡したり、JavaScriptと一緒に使ったりします。

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

【 ::placeholderの書き方】

セレクタ::placeholder {
　　　　スタイル...
}

〜例〜
.placeholder-test::placeholder {
　　　　color: blue;
}

【コード例】

【 HTML 】


<!-- テキストボックス -->
<input type="text" class="placeholder-test" placeholder="プレースホルダー"><br>

<!-- テキストエリア -->
<textarea class="placeholder-test" placeholder="プレースホルダー">

【 CSS 】


.placeholder-test::placeholder {
    color: blue; /* プレースホルダーが青文字になる */
}

ブラウザで実行するとこんな感じです。

CSS
擬似要素::marker｜リストのマーカー部分（"・"や数字など）にスタイル適用

擬似要素markerは、リストのマーカー部分（"・"や数字など）にスタイル適用できます。

markerで適用できるCSSプロパティには制限があります。

【 ::markerが効くプロパティ代表例】

文字色:color
フォント関係:font,font-family,font-size,font-style,font-variant,font-weight
テキスト装飾系:text-combine-upright,text-transform,white-space
その他:unicode-bidi,direction

リストのマーカー部分とは

リストのマーカー部分とは、liタグの文字の先頭に自動でつく記号です。

デフォルトでは、ulタグのリストは"・"、olタグのリストは数字がつきます。

〜例〜

ul・ol・liタグとは

ulタグ：順序のないリストを意味し、liタグを内包します。
olタグ：順序ありリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

【 ::markerの書き方】

セレクタ::marker {
　　　　スタイル...
}

〜例〜
.marker-test::marker {
　　　　color: blue;
}

【コード例】

【 HTML 】


<!-- ul:順序なしリスト -->
<ul>
    <li class="marker-test">りんご</li>
    <li>みかん</li>
    <li class="marker-test">いちご</li>
</ul>

<!-- ol:順序ありリスト -->
<ol>
    <li class="marker-test">赤ちゃん</li>
    <li>幼稚園</li>
    <li class="marker-test">小学校</li>
</ol>

【 CSS 】


.marker-test::marker {
    color: blue; /* リストの"・"が青文字になる */
}

ブラウザで実行するとこんな感じです。

CSS
擬似要素::backdrop｜dialogタグや全画面要素に表示される背景部分

擬似要素backdropは、dialogタグや全画面要素に表示される背景部分に適用できます。

backdropが有効となるタイミングは限られており、以下の2つの場合です。

【 ::backdropが有効となる条件】

dialogタグをJSメソッド"showModal()"で開いたとき
要素をJSメソッド"requestFullscreen()"で開いたとき

また、backdropで適用できるCSSプロパティには制限があります。

【 ::backdropが効くプロパティ代表例】

背景関係:background,background-color,background-image
フィルター関係:backdrop-filter, filter
透明度:opacity
サイズ・配置:width,height,position,inset,z-indexなど

dialogタグとは

dialogタグはモーダル（ポップアップ）を実装できるHTMLタグです。

dialogタグは初期表示では非表示の状態です。

【 dialogを表示させる方法】

JavaScriptのメソッド"showModal()"を実行する(メソッド"close()"で閉じる)
open属性を追記し、"<dialog open>"とする

【背景関係プロパティの記事】

【基本編】CSSで背景を設定するbackground関連プロパティの使い方

こじはなNote

【上級編】CSSで背景を設定するbackground関連プロパティの使い方

こじはなNote

【 ::backdropの書き方】

セレクタ::backdrop {
　　　　スタイル...
}

〜例〜
.backdrop-test::backdrop {
　　　　background-color: blue;
}

【コード例】

【 HTML 】


<dialog class="backdrop-test" id="testDialog">
    <p>こんにちは！</p>
    <button onclick="testDialog.close()">閉じる</button>
</dialog>
<button onclick="testDialog.showModal()">開く</button>

【 CSS 】


.backdrop-test::backdrop {
    background-color: #edd0ff;
}

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

CSS
擬似要素::file-selector-button｜inputタグのtype="file"のボタン部分にスタイル適用

擬似要素file-selector-buttonは、inputタグのtype="file"のボタン部分にスタイル適用できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

inputタグのtype=file

inputタグのtype属性に"file"を設定すると、PDFやPNG、JPGなどファイルアップロード用の入力要素となります。

【 HTML 】


<!-- 画像ファイルのみ -->
画像：<input type="file" accept="image/*" multiple capture>
<br>
<!-- PDFファイルのみ -->
PDF：<input type="file" accept="application/pdf">
<br>
<!-- 複数の拡張子を指定 -->
.jpg,.png,.pdf：<input type="file" accept=".jpg,.jpeg,.png,.gif,.pdf">

ブラウザ実行結果

【 type="file"に関する記事】

type="file"｜ファイルアップロード用の入力要素

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

【 ::file-selector-buttonの書き方】

セレクタ::file-selector-button {
　　　　スタイル...
}

〜例〜
.file-button-test::file-selector-button {
　　　　background-color: white;
　　　　color: blue;
　　　　border: 1px solid orange;
}

【コード例】

【 HTML 】


<input type="file" class="file-button-test" accept=".jpg,.jpeg,.png,.gif,.pdf">

【 CSS 】


.file-button-test::file-selector-button {
    background-color: white;
    color: blue;
    border: 1px solid orange;
}

ブラウザで実行するとこんな感じです。

CSS
擬似要素::spelling-error｜スペルミス部分にスタイル適用（ブラウザ依存）

擬似要素spelling-errorは、スペルミス部分にスタイル適用できます。

スタイル適用の対象はtextareaタグやinputタグのtype=textの入力値です。

【 ::spelling-errorが効くプロパティ代表例】

color：文字色
text-decoration：下線や波線など、文字に装飾ができる
background-color:背景色（対応ブラウザが少ない）

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

【 ::spelling-errorの書き方】

::spelling-error {
　　　　スタイル...
}

〜例〜
::spelling-error {
　　　　color: blue;
　　　　text-decoration: underline wavy green;
}

【コード例】

【 HTML 】


<input type="text" value="stawbery"><br>
<textarea>stawbery

【 CSS 】


::spelling-error {
    color: blue;
    text-decoration: underline wavy green; // 緑の波線
}

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

※ブラウザの種類、操作など様々な要因により、反映されない場合がございます。

まとめ

CSSの擬似要素は、特定の要素を追加して、スタイルを反映できる仕組み。
CSS
擬似要素before：要素内の先頭にコンテンツ(内容)を挿入できる。
CSS
擬似要素after：要素内の末尾にコンテンツ(内容)を挿入できる。
CSS
擬似要素first-line：ブロック要素内の最初の1行にスタイル適用できる。
CSS
擬似要素first-letter：ブロック要素内の最初の1文字にスタイル適用できる。
CSS
擬似要素selection：ユーザーが選択したテキスト部分にスタイル適用できる。
CSS
擬似要素placeholder：プレースホルダーのテキストにスタイル適用できる。
CSS
擬似要素marker：リストのマーカー部分（"・"や数字など）にスタイル適用できる。
CSS
擬似要素backdrop：dialogタグや全画面要素に表示される背景部分に適用できる。
CSS
擬似要素file-selector-button：inputタグのtype="file"のボタン部分にスタイル適用できる。
CSS
擬似要素spelling-error：スペルミス部分にスタイル適用できる。

【 2025/07/05 16:06 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！

CSSの擬似要素とは？基本的な擬似要素10選！使い方を解説！