【CSS擬似要素】spanを使わないテキスト装飾

要素の一部のスタイルを指定できるCSS擬似要素。

繰り返し指定したいスタイルは、HTMLに直接書き込むspanを使うよりも効率がいいですよ〜

１文字目のテキストを指定

例　<h2>タイトルが入ります</h2>　→　タイトルが入ります

h2::first-letter {
    color: red;
}

要素::first-letterで要素の１文字目を指定

【CSS擬似クラス】要素の順番や種類を指定する方法

sukimanosukima.com

１行目のテキストを指定

例　<h2>タイトル１行目です<br>タイトル２行目です</h2>　→

　　タイトル１行目です
　　タイトル２行目です　

h2::first-line {
    color: red;
}

要素::first-lineで要素の１行目を指定

選択したテキストを装飾

See the Pen ::selection by sukimadou (@sukimadou) on CodePen.

要素::selectionで選択したテキストの装飾を指示

テキストの直前にコンテンツを入れる

例　<h2>タイトルが入ります</h2>　→　☆タイトルが入ります

h2::before {
    content: '☆';
}

要素::before { content: ‘追加内容’; }で要素の直前にコンテンツを追加

※画像を追加する場合は追加内容に画像のパスを記述すればOKです

テキストの直後にコンテンツを入れる

例　<h2>タイトルが入ります</h2>　→　タイトルが入ります☆

h2::after {
    content: '☆';
    color: red;
}

要素::after { content: ‘追加内容’; }で要素の直後にコンテンツを追加

※例のように追加したコンテンツも、自由に装飾することができます

以上、テキストを装飾するCSS擬似要素でした。

テキストだけでなく他の要素にも使用できるものもあるので、いろいろ試してみてくださいね。