This is the fifth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge;

preface

CSS pseudo-elements, the reason is called pseudo-elements, because they are not real page elements, HTML has no corresponding elements, can also be understood as false elements. However, all of their usage and behavior are the same as the actual page elements. They can be presented with the same CSS style as the page elements. On the surface, they appear to be certain elements of the page, but are actually the behavior of the CSS style, so they are called pseudo-elements.

The body of the

What are the features?

  1. You can reduce the definition of DOM elements, they do not change the document content and cannot be copied, they are just added to the CSS rendering layer;
  2. It must be used with the Content attribute, otherwise it will not take effect, and pseudo-elements are inline by default, but can be adjusted using the display attribute.
  3. Structure can not be reviewed, not convenient debugging;
  4. Js cannot operate, add, delete, etc.

Whether it is: :or: ?

Historically, prior to CSS2, pseudo-classes and pseudo-elements used single colons, such as :before and ::before, which had the same effect. The concept of double colons is introduced in the css3 specification. Thus, the single colon (:) represents the pseudo-class; The double colon (:) indicates a pseudo-element.

A summary of the differences between the two: pseudo-elements create new objects that are not visible in the DOM tree but can be manipulated; Pseudo-classes do not create new objects, just different states of an element in the DOM;

What elements are pseudo-elements?

The selector example Case description
::after p::after Insert the content after each element.
::before p::before Insert the content before each element.
::first-letter p::first-letter Select the first letter of each element.
::first-line p::first-line Select the first row of each element.
selection p::selection Select the part of the element selected by the user.

Attached to this part of W3C about pseudo elements is an example link, W3C pseudo elements example exercise, feel very good, easy to understand. Those of you who are interested can try it out.

Application Scenario Examples

  1. Remove the floating
    <div class="box">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>.box:after{ content: ''; display: block; clear: both; *zoom: 1; /* Ie6-7 does not support hasLayout */}Copy the code

Realized effect:

  1. Simulation implementation dialog box
   <div class="margin">
        <h3>Example 8: Simulate the wechat dialog box</h3>
        <div class="left">
             <p>Hello, world!</p>
        </div>
        <div class="right">
            <p>Tomorrow is another day full of hope!</p>
        </div>
    </div>.left,.right{ min-height: 40px; position: relative; display: table; text-align: center; border-radius: 7px; background-color: #50b5ee; }. Right {/* separate the left and right dialogs */ top: 40px; left: 60px; }.left > p,.right > p{/* make the content center */ display: table-cell; vertical-align: middle; padding: 0 10px; }. Left: before,. Right: after {/ * with pseudo-classes write small triangle * / content: "'; display: block; width: 0; height: 0; border: 8px solid transparent; position: absolute; top: 11px; } /*.left:before{border-right: 8px solid #50b5ee; left: -16px; } .right:after{ border-left: 8px solid #50b5ee; right: -16px; } *zoom: 1; /* Ie6-7 does not support hasLayout */}Copy the code

Effect of instance

3. Zoom in on the click area

    <div class="play-cover">View area element</div>
    .play-cover {
       position: relative;
       width: 130px;
       height: 50px;
       text-align: center;
       line-height: 50px;
       border: 1px solid #333;
     }

   .play-cover:before {
       content: "";
       position: absolute;
       top: -20px;
       left: -20px;
       bottom: -20px;
       right: -20px;
       outline: dashed;
   }
Copy the code

Effect of the sample

summary

Pseudo-elements can achieve not only these, in-depth study, there will be a windfall. Interested partners can continue to learn about it.

conclusion

The front is a long distance, we are all on the road, hope to communicate with friends, progress together. Keep updating ing…..