CSS
擬似要素

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
サーチ…


前書き

擬似クラスは擬似クラスと同じようにCSSセレクタに追加されますが、特別な状態を記述するのではなく、html要素の特定の部分をスコープしてスタイル設定することができます。

たとえば、:: first-letter擬似要素は、セレクタで指定されたブロック要素の最初の文字のみを対象とします。

構文

  • selector :: pseudo-element {プロパティ：値}

パラメーター

擬似要素説明
::after 要素の内容の後に内容を挿入する
::before 要素の内容の前に内容を挿入する
::first-letter 各要素の最初の文字を選択します。
::first-line 各要素の最初の行を選択します。
::selection ユーザーが選択した要素の部分と一致します。
::backdrop 最上位レイヤーのスタック内の要素の基礎となるドキュメントを隠す背景を作成するために使用されます
::placeholder フォーム要素のプレースホルダテキストをスタイルすることができます（実験的）
::marker 特定の要素にリストスタイルの属性を適用する場合（実験的）
::spelling-error ブラウザが間違って綴られたテキストセグメントを表します（実験的）。
::grammar-error ブラウザが文法的に正しくないと判断したテキストセグメントを表します（実験的）。

備考

  • 時にはあなたは、二重のコロン（表示されます:: （）の代わりに、1つだけ: ）。これは、擬似要素から擬似クラスを分離する方法ですが、Internet Explorer 8のような一部の古いブラウザでは、単一のコロンをサポートしています（ :疑似要素のため）。

  • セレクタでは1つの擬似要素しか使用できません。ステートメント内の単純なセレクタの後に表示する必要があります。

  • 疑似要素はDOMの一部ではないため、 :hoverやその他のユーザーイベントによってターゲティングすることはできません。

擬似要素

擬似要素はセレクタに追加されますが、特別な状態を記述するのではなく、ドキュメントの特定の部分をスタイルすることができます。

content属性は、擬似要素のレンダリングに必要です。ただし、属性は空の値を持つことができます（例： content: "" ）。 

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

コードの結果

リスト内の擬似要素

擬似要素は、リストの外観を変更するためによく使用されます（ほとんどの場合、順序付けられていないリスト、 ul ）。

最初のステップは、デフォルトリストの箇条書きを削除することです： 

ul {
  list-style-type: none;
}

次に、カスタムスタイリングを追加します。この例では、弾丸のグラデーションボックスを作成します。 

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML 

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

結果

結果



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow