【CSS】疑似要素
CSS
2021/04/08
疑似要素とは
疑似要素とは、セレクターに付与することで要素の特定の部分にスタイルを適用するためのものです。
セレクター::疑似要素のように指定します。
疑似要素一覧
before, after
指定した要素の子要素に擬似的なインライン要素を作成します。
beforeは先頭に、afterは末尾に追加されます。
使用する際は、contentプロパティを指定する必要があります。
これは作成した疑似要素で表示する文字を指定します。
HTML
<p class="elm">(abcde)</p>CSS
.elm::before {
content: 'before';
color: blue;
}
.elm::after {
content: 'after';
color: red;
}(abcde)
first-letter
指定した要素の最初の文字を表します。
HTML
<h1>abcde</h1>CSS
h1::first-letter {
font-size: 2em;
color: red;
}abcde
first-line
指定した要素の最初の行を表します。
HTML
<div class="elm">
<p>abcde</p>
<p>aiueo</p>
</div>CSS
.elm::first-line {
color: red;
}abcde
aiueo
marker
リストのアイテム（項番や記号）を表します。
HTML
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>CSS
ul > li::marker {
color: red;
}- item1
- item2
- item3
placeholder
<input>や<textarea>のプレイスホルダーを表します。
HTML
<input type="text" placeholder="prease input text">CSS
input::placeholder {
color: red;
}selection
ドラッグで文書を選択した際のスタイルを表します。
HTML
<p class="elm">abcdefghijklmnopqrstuvwxyz</p>CSS
.elm::selection {
background: red;
color: white;
}abcdefghijklmnopqrstuvwxyz