メニュー 閉じる

CSS で自由に文章や画像、アイコンを見てみましょう: before、: after

: 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 の名前を調べた後に、私の口のように自由にカスタマイズしてみよう。

コメント(情報は必要ありません)

Posted in All , ワードプレス - Wordpress

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.