Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleA More elegant display of the “Movable Box” : ① The Clever Use of “False Elements”


1. How to use pseudo-elements to clear floats? 2. What methods can be used to optimize CSS3 Animation rendering?Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Preamble: “pseudo-elements” are very useful when we create styles, they can greatly simplify our code, and they can do some unexpected things.


1 understanding “pseudo-elements”

1.1 pseudo elements

Use to create and style elements that are not in the document tree. 🔗 source code and effect display

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
 <h6>Hello, 10,000 hours front end!</h6>
 <p>Oli's front end 10,000 hours</p>
 <input type="text" placeholder="Oli's front end 10,000 hours.">
</body>
</html>
Copy the code

CSS

h6::first-letter {
  font-size: 20px;
}    
/* 🚀 If we didn't use fake elements, we would use more code to represent them in HTML - such as adding a span, and then styling a span in CSS. * / 


h6::after {
  content: "@ 2020";
}
/*🚀 can be added directly after h6. * /
/* 🚀 note that the content can be an empty string, but the content must be written, otherwise the pseudo-element will not be valid. * /


p::selection {
  color: red;
}

input::-webkit-input-placeholder {
  color: blue;
}
/* 🚀 placeholder, different browsers may be different, for Chrome we will add -webkit- and input-. * /
Copy the code

1.2 ::before / ::after 

  • Element ::before creates an inline element within element, ** as element’s first child;

  • Element :: After Creates an inline element within an Element as the last child of element;

  • Use ::before ::after to save labels;

  • Content is essential.


2. Usage of pseudo-elements

2.1 Clearing floats

🔗 source code and effect display HTML

<body>
  <ul class="navbar clearfix">
    <li><a href="#">Home page</a></li>
    <li><a href="#">The article</a></li>
    <li><a href="#">works</a></li>
    <li><a href="#">about</a></li>
  </ul>
</body>
Copy the code

CSS

li {
  list-style: none;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.navbar {
  background: # 000;
}
.navbar>li {
  float: left;
  margin: 5px 10px;;
}
.navbar a {
  color: #fff;
}
Copy the code

2.2 Alternative Labels

🏆 Pre-knowledge: Note the CSS3 attributes in the codetransformThe value of thetranslate rotateExplanation of usage!

div {
  transform: value; }Copy the code
Common “value” describe
translateX(45px) Move 45px horizontally to the right;
translateY(45px) Pan it down 45px vertically;
rotate(angle) Define 2D rotation, specify Angle in parameters;
rotate3d(x,y,z,angle) Define 3D rotation;
rotateX(angle) Define 3D rotation around the X-axis;
rotateY(angle) Define 3D rotation around the Y axis;
rotateZ(angle) Define 3D rotation around the Z axis.

(💡 image: 3D rotation around Z axis)

2.2.1 Hollow upper triangle

💡 front knowledge: drawing through CSS “triangle” – “(09) CSS to box, background, links, lists, forms, tables, such as add | CSS style”

🔗 source code and effect display

💡 tip: console to adjust the offset

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <div class="bubble">Hello, 10,000 hours front end!</div>
</body>
</html>
Copy the code

CSS

.bubble {
  /* We will style the border */

  position: relative;
  /* 🚀🚀 add an anchor for the absolute location below. * /

  display: inline-block;
  padding: 10px;
  background: #fff;
  border: 1px solid # 000;
  border-radius: 3px;
}

.bubble::before {
  content: "";
  /* This pseudo-element selector means to create a row element inside Bubble as the first child of Bubble. * /
  /* This is the triangle we want. * /

  position: absolute;
  top: -6px;
  /* Set it to absolute position, take it out of the document flow, and then offset it up. * /
  /* 🚀🚀 Once absolute positioning is set, it is necessary to set an "anchor point" on the parent container to offset. * /
  /* As to how much offset is appropriate, we usually use the mouse to scroll to the most appropriate location in the developer tools background by examining the element. * /

  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;

  border-top: 1px solid # 000;
  border-left: 1px solid # 000;
  /* 🏆 we added a top border and a left border, imagine a block, add these two borders and rotate it, it will appear as a "triangle". * /

  transform: rotateZ(45deg);
  /* 🏆 uses the CSS3 property to make the bounding block rotate "45°" around the z-axis. * /
  /* 🏆 The z-axis can be understood as follows: your monitor screen is a plane consisting of X and Y axes, and the straight line between your "line of sight" and this plane of the monitor is the Z-axis. We can easily rotate around the Z axis here! * /
}
Copy the code

🏆

2.2.2 Solid upper triangle

🔗 source code and effect display HTML

<div class="bubble">Hello, 10,000 hours front end!</div>
Copy the code

CSS

.bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff; 
  border: 1px solid # 000;
  border-radius: 3px; 
}

.bubble::before {
  content: "";
  position: absolute;
  top: -10px;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent grey transparent;
}
Copy the code

2.2.3 Inside the right corner of hearts

🔗 source code and effect display

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <div class="bubble">Hello, 10,000 hours front end!</div>
</body>
</html>
Copy the code

CSS

.bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff; 
  border: 1px solid # 000;
  border-radius: 3px;
 
  overflow: hideen;
}

.bubble::before {
  content: "";

  position: absolute;
  right: 0;
  top: 0;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent red transparent transparent;

}
Copy the code

2.3 Extension — application of pseudo-class selectors

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>Today's mood:<input type="checkbox">
</body>
</html>
Copy the code

CSS

input[type=checkbox] {
  -webkit-appearance: none;
  /* Remove the default style -- a box */

  appearance: none;

  background: url(https://qdywxs.github.io/css-images/css12-img01.jpg) 0 0 no-repeat;
 
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: contain;
  vertical-align: middle;
  /* To align it with the previous text */

  outline: none;
}

input[type=checkbox]:checked {
  /* Pseudo-class selector: state on a checkbox or radio check. * /
  /* When unchecked with the mouse, it will display the following style. * /

  -webkit-appearance: none;

  appearance: none;
 
  background: url(https://qdywxs.github.io/css-images/css12-img02.jpg) 0 0 no-repeat;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: contain;
  vertical-align: middle;     
}
Copy the code


Postscript: In the next post, we’ll summarize the ways to “center” boxes in practice. It’s a very important piece, and it comes up all the time.

I wish you good, QdyWXS ♥ you!