A front end face questions - Application of pseudo-element

First, the application of pseudo-element

1. Clear float

Parent element has child elements, and the height of the parent element is not set, the child elements floating in the parent element, the result would be the height of the parent element is 0, which also led to the parent element height collapse , we need to clear the float.

Elements are added to the vessel floating clearfix a class, and then add this to a class : After following pseudo-element element to implement a block element invisible (Block element) clean float.

2. parting line

HTML

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

CSS

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

3. Counter

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 Property Description

counter-reset property values ​​of a selected number of occurrences of the counter. The default is 0.

• Description: With this property, the counter may reset or set to any value may be positive or negative. If no number, it defaults to 0.
• Note: If you use the "display: none", you can not reset the counter. If you use the "visibility: hidden", you can reset the counter.

property counter-increment counter is incremented each time a select occur. The default increment is 1.

• Description: With this property, counters can be incremented (or decremented) a value, which can be positive or negative. If no number value, the default is 1.
• Note: If you use the "display: none", you can not increase the count. As used "visibility: hidden", the count can be increased.

4. Alternatively tag

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. Custom checkbox

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;     
}

Second, the use of pseudo-elements of attention problems

1. Mentioned content module, the dummy elements if the content property is not set, the dummy elements are useless.
2. Using pseudo-element content inserted in the page's source code is not visible, visible only in CSS.
3. The elements are inserted in the default inline elements (or, in HTML5, text semantic category). Accordingly, in order to insert the element imparting highly filled, margins etc., you usually have explicitly defined a block element it is.
4. Also note that the typical CSS inheritance rules apply to the insertion of elements. For example, you have a series in bold font, Arial, sans-serif font is applied to the body element, and then, like other elements of the pseudo-element will inherit the same font family.
5. Pseudo-elements not naturally inherit the style from the parent element (such as padding margins) of.

Third, the difference between pseudo-elements and pseudo-classes

Pseudo-class selection element is based on the elements in the current state , or the current element with the characteristics, rather than static flag element id, class, properties and the like. Due to dynamic changes state, so to achieve a particular state of an element, it is possible to obtain a pseudo-style class; when state changes, it will lose this style. It can be seen, and its function is somewhat similar class, but it is based on abstract outside of the document , so called pseudo-classes.

For the dummy earth element is different from the special state, the pseudo-element is an element specific operation contents , it operates on the level deeper than the pseudo-layer type, it is also dynamic pseudo-classes is much lower than . In fact, the dummy element is designed to select the first word to the contents of such element (female), a first row select specific content such a conventional front or rear selector could not be done. It's actually control the content and elements are the same, but it itself is only based on abstract elements do not exist in the document , so called pseudo-elements.