: Before {content」「} または: after {content」「} は、html を直接制御することないです (プラグインの要素が化けたり) などの要素に共通のプロパティを与えたいと思うとき非常に便利に使用できる仮想のセレクターである。
使用法は、目的のプロパティの後: before を使用し、content」、「内に格納するコンテンツを配置するとされる。
: Before:: after は、実際の CSS の使用法
<div class="reply">コメント</div>
上記の class 名前 reply という名前の要素の前に何かを入れたい場合は CSS に追加するとされる。
.reply::before {
Content: 「これは」
}
この content:」または「要素に属性を与えることを望む、ゆったりとされる。
.reply::before {
Content: 「これは」;
font-weight: bold;
font-style: italic;
}
テキストだけでなく、background: url (アドレス) を no-repeat; 画像アドレスを入れて、width: 16px;Height: 16px; などに幅と高さを設定して画像を入れて、Awesome CSS icon のような CSS のアイコンを使用することもある。
.reply::before {
content: "f044";
font: normal normal normal 16px/1 FontAwesome;
margin-right: 5px;
}
(注に例のコメントの前に CSS の絵文字は、実際につ蜂蜜運転 (GKKmon) サイトのコメントウィンドウで使用している)。
: Before:: after アプリケーション
この機能を使用することによって、本当にさまざまな方法でサイトやブログを飾ることができる。つ蜂蜜運転 (GKKmon) で使用することのように特定の要素の前にアイコンを挿入するか、<li></li>などのリストを自分で作成することもある。
個人的に何よりも最も良い点は、プラグインの機能であるか、いくつかの HTML 要素であるか知らなくて変更していた部分も変えることができる点である (蜂蜜の運転 (GKKmon) サイトで使用している私のコメント部分を Jetpack (ジェット) と呼ばれるワードプレスのプラグインですが、変更すること)。
を応用して、自分のサイトの変更したい部分を右クリック→要素のチェックなどに class の名前を調べた後に、私の口のように自由にカスタマイズしてみよう。