フロントエンド面の質問 - 擬似要素の応用 - コードワールド

まず、擬似要素の応用

1.クリアフロート

親要素が子要素を持っている、と親要素の高さは、親要素に浮かぶ子要素に設定されていない場合、結果は親要素の高さになり、親要素につながった、0である高さの崩壊、我々はフロートをクリアする必要があります。

要素は、容器フローティングclearfixにクラスを追加し、クラスにこれを追加している。後に目に見えないブロック要素（ブロック要素）クリーンフロートを実装する擬似要素の要素を以下。

クリアフロート

2.パーティングライン

HTML

<p class="line">分割线</p>

CSS

.line::before, .line::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
}

3.カウンター

カウンター

HTML

<div class="chooses">
    <input type="checkbox">a
    <input type="checkbox">b
    <input type="checkbox">c
    <input type="checkbox">d
    <input type="checkbox">e
    <input type="checkbox">f
    <input type="checkbox">g
    <input type="checkbox">h
    <input type="checkbox">i
    <input type="checkbox">j
</div>
<p class="choose">我选择了<span></span>个字母</p>

CSS

.chooses {
      counter-reset: letters;
}
.chooses input:checked {
      counter-increment: letters;
}

.choose span:after {
      content: counter(letters);
}

3.1 CSSプロパティ説明

カウンタの出現の選択された数のカウンタリセットプロパティ値。デフォルトは0です。

説明：このプロパティを使用すると、カウンタがリセットされ得るか、または任意の値に設定が正または負であってもよいです。番号なし、0がデフォルトの場合。
注：使用しない場合は、「表示：none」を、あなたはカウンターをリセットすることはできません。あなたは「可視性：隠された」を使用する場合は、カウンタをリセットすることができます。

プロパティカウンタインクリメントカウンタが起こり選択するたびにインクリメントされます。デフォルトの増分は1です。

説明：このプロパティを使用すると、カウンタは、正または負とすることができる値をインクリメント（又はデクリメント）することができます。なし数値場合、デフォルトは1です。
注：使用しない場合は、「表示：none」を、あなたは数を増やすことはできません。使用される「可視性：隠された」として、カウント数を増加させることができます。

4.別のタグ

代替ラベル

HTML

<div class="tooltip">
    <span class="caret"></span>
    Hello World
</div>
<div class="bubble">Hello World</div>

CSS

.tooltip, 
.bubble{
      position: relative;
      padding: 10px;
      border-radius: 3px;
      background: #fff;
      border: 1px solid #000;
      display: inline-block;
}
.tooltip .caret,
.bubble:before{
      width: 10px;
      height: 10px;
      border-left: 1px solid #000;
      border-top: 1px solid #000;
      background: #fff;
      display: inline-block;
      transform: rotateZ(45deg);
      position: absolute;
      top: -6px;
}
.bubble:before{
      content:''
}

5.カスタムチェックボックス

チェックボックス

HTML

今天的心情: <input type="checkbox">

CSS

input[type=checkbox]{
    -webkit-appearance: none;
    appearance: none;
    background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;
    outline: none;
}
input[type=checkbox]:checked{
    -webkit-appearance: none;
    appearance: none;
    background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;     
}

第二に、注意問題の擬似要素の使用

言及したコンテンツモジュール、ダミー素子コンテンツプロパティが設定されていない場合、ダミー要素は役に立ちません。
ページのソースコード内に挿入擬似要素のコンテンツを使用することのみCSSに見え、見えません。
要素は（HTML5、テキスト意味カテゴリで、または）デフォルトのインライン要素に挿入されています。したがって、高充填、余白などを付与する元素を挿入するために、あなたは通常、明示的にそれがあるブロック要素を定義しています。
また、典型的なCSSの継承ルールは、要素の挿入に適用されることに注意してください。たとえば、あなたが太字でシリーズを持って、Arialのは、サンセリフフォントはbody要素に適用され、その後、擬似要素の他の要素と同様に、同じフォントファミリを継承します。
擬似要素は、自然の（例えばパディング余白など）親要素からスタイルを継承しません。

第三に、擬似要素と擬似クラスの違い

擬似クラスの選択要素が基づいている現在の状態の要素、又は特性を有する現在の要素ではなく、静的フラグ要素ID、クラス、プロパティなどが挙げられます。状態が変化した場合は、このスタイルを失うことになる。動的に起因するので素子の特定の状態を達成するために、擬似スタイルクラスを得ることができ、状態を変化させます。それは見ることができ、その機能はやや似たクラスですが、それが基づいている文書の抽象外、いわゆる擬似クラス。

ダミー希土類元素は、特別な状態と異なる、擬似要素であるため、素子の特定の操作内容、それはより深い擬似層型よりもレベルで動作し、それはまた、ある動的な擬似クラスよりもはるかに低いです。実際には、ダミー素子は、このような要素の内容（雌）に最初の単語を選択するように設計され、最初の行は、従来の前面または背面選択を行うことができなかった特定のコンテンツを選択します。これは、実際にコンテンツを制御していますし、要素は同じですが、それ自体だけに基づいて文書には存在しない抽象的な要素、いわゆる擬似要素を。