This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact

define

Pseudo-elements, originally known as pseudo-elements. The essence of this is summed up in one sentence: “You can insert content into the page without adding real DOM elements to the HTML.” The key point is a “fake” word, we often use this word “pseudo-code”, “hypocrite”, its meaning is “just like, but not really”.

About single colons and double colons

The single colon is supported by all browsers. The double colon is a new feature in CSS3 to distinguish pseudo-elements from pseudo-classes. You are advised to use double colons for pseudo-elements and single colons for pseudo-classes. The double colon syntax is not supported in IE8, so it’s best to use double colons for “pseudo-elements” if you don’t have to worry about IE8 compatibility.

Pseudo-element content

The important difference between pseudo-elements and pseudo-classes is that “pseudo-elements” have content, because you are, after all, “faking” an element. Pseudo-classes, on the other hand, simply impose non-existent style classes on existing elements (triggered under certain conditions).

The content of a pseudo-element is declared through the content attribute, which can be:

  • An empty string
  • Common string or Unicode
  • Image resources
  • counter

Common use

Content nulling is the most common use, so that we declare a pseudo-element without any physical content, but with a style declaration, we can make the desired small effect appear on the page.

Like the arrow in a button

<div class="my-btn-wrap">
  <div class="my-btn">determine</div>
</div>
Copy the code
.my-btn-wrap {
  padding: 20px;
  background: aliceblue;
}
.my-btn {
  position: relative;
  margin: auto;
  width: 80px;
  height: 40px;
  border: 1px solid # 000
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  background: #fff;
}
.my-btn::after {
  content: ' ';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 6px solid # 000;
}
Copy the code

Such as conversation bubbles in chat software

<div class="msg-wrap-self">
  <span>Start taking a beat</span>
  <img src="https://user-images.githubusercontent.com/23159565/127432445-57fa5223-9002-4dc1-b557-1ec2710f65ee.jpeg" data-username="wilson" data-tapmsg="" class="avatar-common">
</div>
Copy the code
.msg-wrap-self {
  display: flex;
  padding-top: 10px;
  padding-right: 20px;
  align-self: flex-end;
}
.msg-wrap-self>span {
  position: relative;
  background-color: #aae87a;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 12px;
}
.msg-wrap-self>span:after {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  right: -10px;
  content: ' ';
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-left-color: #aae87a;
  border-left-width: 5px;
}
.msg-wrap-self>img {
  width: 25px;
  height: 25px;
  border-radius: 2px;
}
Copy the code

Like a hint bubble

<div class="my-wrap">
  <div class="pop-tip">Click the button below to download</div>
  <div class="my-download">download</div>
</div>
Copy the code
.my-wrap {
  padding: 20px;
  background: aliceblue;
}
.pop-tip {
  position: relative;
  background: pink;
  border-radius: 6px;
  line-height: 40px;
  padding: 0 10px;
  text-align: center;
  margin: 0 80px;
}
.pop-tip::after {
  content: ' ';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 16px solid #ffc0cb;
}
.my-download {
  position: relative;
  margin: auto;
  margin-top: 20px;
  width: 100px;
  height: 40px;
  border: 1px solid # 000
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  background: #fff;
}
Copy the code

Content as a normal string, Unicode, or image resource address is less flexible, with more style flexibility by assigning an empty string to content and using a background image to display the content.

The use of the counter, which can be used to replace the LI element created in HTML, is illustrated with an example.

<div class="items">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>
Copy the code
body {
  counter-reset: id;
}
.items {
  margin: 60px 0;
}
.items > div {
  margin: 10px;
  padding: 5px 10px;
  background-color: yellowgreen;
}
.items > div::before {
  counter-increment: id;
  content: 'the first' counter(id) ':';
}
Copy the code

conclusion

In general, pseudo-elements are primarily used to “complement” HTML elements with CSS, so that small style content can be moved to CSS for implementation without being reflected in the HTML structure.

This ability can be very helpful in a complex HTML page to lighten the structure of the page. Imagine that your page structure is already full of layers, layouts, containers, and other elements that need to be trimmed around. If you want to implement on top of the existing DOM structure, you may need to rearrange some of the HTML structure, so you might consider filling it with pseudo-elements to “mitigate” the complexity of the HTML structure.