要素の前後に文字を追加する方法|CSSで編集【before・after】

HTML&CSS

要素の前後に文字を追加したい

要素の前後に文字を追加する場合は疑似要素《before》と《after》を利用します。

例えば、以下のようなHTMLが存在したとします。

<div class="sample">サンプル</div>

これを表示すると以下のようになります。

この「サンプル」文の前後に文字を追加します。

要素の前後に文字を追加する際には「content」プロパティと値、また、直前・直後にCSSで追加する場合は疑似要素《before》と《after》を組み合わせて利用することで表示することができます。

プロパティ「content」で文字を指定

文字を表示する場合は《content》プロパティが便利です。

セレクタ::before {
	content: "文字";
}

このプロパティの中に文字を入力することで指定されたセレクタに適応されます。

要素の前後に文字を追加【サンプル】

前後に文字を表示する場合は「content」プロパティと疑似要素を組み合わせて利用します。

要素の前後に文字を表示した場合、それぞれの書き方は以下のようになります。

前に文字を追加する《before》

要素の前に文字を追加する場合は疑似要素《before》を利用します。

以下はCSSです。

.sample::before {
	content: "文字";
	color: red;
}

実行すると、以下のようになります。

後に文字を追加する《after》

要素の前に文字を追加する場合は疑似要素《after》を利用します。

以下はCSSです。

.sample::after {
	content: "文字";
	color: green;
}

実行すると、以下のようになります。

要素の前後に文字・画像・アイコンを追加|問題集

要素の直前・直後に追加|問題

以下のリストのように小なり符号「<」を文字の直後に付けた。

以下に該当する疑似要素は何か?

以下のリストのように符号「»」を文字の直前に付けた。

以下に該当する疑似要素は何か?

以下の画像における《content》プロパティの正しい書き方はどれか?

以下の画像の「文字」を入力し、表示させるためのプロパティは何か?

Your score is

要素の前後に文字を追加してみよう!

要素の前後に文字を追加する方法について紹介しました。

これらの疑似要素を応用することで文字だけでなく、画像・Webアイコン等の様々なコンテンツを表示させることができます。

スタイルシートのコーティング作業では使用機会も多いので覚えておいて損は無いと思います。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました