ywork2020.com

Title

要素内の先頭に疑似的な子要素を挿入する

目次 (INDEX)

::beforeとは

ここで説明する::before とは次の語句からなるCSSの疑似要素です。
before
読み: ビフォー
意味: ~の前に、以前は

目次に戻る

::before疑似要素の概要

この疑似要素は指定要素内の先頭に疑似的な子要素を挿入します。

セレクター::beforeはセレクターに該当する要素のコンテンツボックス内の先頭に疑似的な要素を挿入します。 また、この疑似要素に content プロパティを使用することで疑似要素のコンテンツとして任意の値を挿入することも可能です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似要素の記述は以下のような書き方になります。

セレクター::before{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに利用する要素はセクションごとに違うので注意してご覧ください。

目次に戻る

基本: contentプロパティを使う

ここでは::before疑似要素の基本的な使用方法としてcontentプロパティを使用する方法をサンプルとします。

このサンプルではdiv要素に「これはサンプルテキストです。」というテキストが内包されています。 つまり、「これはサンプルテキストです。」のテキストがコンテンツになっているわけです。

<body>
	<div>これはサンプルテキストです。</div>
</body>

これはサンプルテキストです。

次のstyleコードの::before疑似要素の部分を見て下さい。背景色をアクアマリンに設定し、 contentに"ここに::beforeで疑似要素が追加されました。"という文字列を設定しています。 これはdiv要素の中に先頭の子要素を追加して、"ここに::beforeで疑似要素が追加されました。"というテキストを内包するという内容です。

<style>
	div{
		margin: 10px;
		padding: 10px;
		border: 1px solid #aaa;
		background-color: khaki;
		width: fit-content;
	}
	div::before{
		background-color: aquamarine;
		content: "ここに::­beforeで疑似要素が追加されました。";
	}
</style>

これはサンプルテキストです。

結果はdiv要素に元からある「これはサンプルテキストです。」のテキストの前に「ここに::­beforeで疑似要素が追加されました。」 テキストが追加されています。つまり、これをタグとして解釈すると下記のようにdiv要素の子要素として先頭に疑似要素が追加されているということになるわけです。

<body>
	<div><疑似要素>ここに::­beforeで疑似要素が追加されました。</疑似要素>これはサンプルテキストです。</div>
</body>

以上が::before疑似要素の基本的な動作となります。

目次に戻る

参考: 疑似要素を使ってオートナンバーを出力する

ここではli要素内にオートナンバーを出力する疑似要素を挿入してみたいと思います。 これはシンプルにHTMLの ol要素 を使うこともできますし、CSSの list-style プロパティを使っても様々な演出ができます。 しかし、疑似要素を使うことで更にデザイン性の高いものが作れることもありますので参考としていただけましたら幸いです。

<body>
	<ul>
		<li>リスト要素のテキスト</li>
		<li>リスト要素のテキスト</li>
		<li>リスト要素のテキスト</li>
	</ul>
</body>
  • リスト要素のテキスト
  • リスト要素のテキスト
  • リスト要素のテキスト

<style>
	ul{
		list-style: none;
		counter-reset: countLi;
	}
	li{
		counter-increment: countLi;
	}
	li::before{
		display: inline-block;
		border: thin solid gray;
		border-radius: 20%;
		margin: 8px;
		padding: 8px;
		width: fit-content;
		color: red;
		background-color: pink;
		content: "No." counter(countLi);
	}
</style>

目次に戻る