Cascading style sheets (CSS) are primarily used to apply styles to HTML tags, but in some cases it may be unnecessary or impossible to add additional tag elements to a document, and there is actually a feature in CSS that allows us to add additional tags without interrupting the actual document: pseudo-elements. You’ve heard the term, especially if you’ve been following some of our tutorials. In fact, there are some CSS family members that are classified as pseudo-elements, such as: :first-line, :first-letter, ::selection, :before, and :after, we will limit the coverage to :before and :after, and the “pseudo-elements” here refer exclusively to these two elements. We will approach this particular topic from a fundamental point of view.

Syntax and browser support

Pseudo-elements have actually been around since CSS1, but were released in CSS2.1 with :befor and :after. In the beginning, pseudo-elements used single colons as syntax, then as the Web evolved, pseudo-elements were modified in CSS3 to use ::before & :after- to distinguish them from pseudo-classes (i.e. : hover, : active, and so on). The following figure

Please click on

What does it do?

In short, the pseudo-element inserts an extra element before or after the content element, so when we add both elements together, they are technically equal, labeled as follows.

<p>
<span>:before</span> 
  This the main content. 
<span>:after</span>
</p>
Copy the code

But these elements are not actually generated on the document. They are still visible on the surface, but they are not found in the document source, so they are actually false elements.

Using pseudo-elements

Using pseudo-elements is relatively easy; The following syntax selector: before will add elements before the content selector, and this syntax selector: after will add elements after the content selector. To add content to the content selector, use the content property.

For example, the following snippet adds a quote before and after the code block.

blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}
Copy the code

Sets the style of the pseudo-element

blockquote:before {
  content: open-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: left;
  position: relative;
  top: 30px;
 
}
blockquote:after {
  content: close-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: right;
  position: relative;
  bottom: 40px;
}

Copy the code

The specified dimension

By default, the generated element is an inline level element, so when we specify the height and width, we must first define it as a block element using the display:block declaration.

blockquote:before {
  content: open-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: left;
  position: relative;
  top: 30px;
  border-radius: 25px;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}
blockquote:after {
  content: close-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: right;
  position: relative;
  bottom: 40px;
  border-radius: 25px;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}

Copy the code

Additional background

We can also replace content with images, not just plain text. Although the Content property provides a URL () string to insert the image, in most cases I prefer to use the background property for more control over the attached image.

blockquote:before {
  content: "";
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  float: left;
  position: relative;
  top: 30px;
  border-radius: 25px;
 
  background: url(images/quotationmark.png) -3px -3px #ddd;
 
  display: block;
  height: 25px;
  width: 25px;
}
blockquote:after {
  content: "";
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  float: right;
  position: relative;
  bottom: 40px;
  border-radius: 25px;
 
  background: url(images/quotationmark.png) -1px -32px #ddd;
 
  display: block;
  height: 25px;
  width: 25px;
}
Copy the code

However, as you can see from the code snippet above, we are still declaring the Content property, this time with an empty string. Content attributes are a requirement that should always be applied; Otherwise the pseudo-element will not work.

Used in combination with pseudo-classes

Although they are different types of pseudo-elements, we can use both pseudo-classes and pseudo-elements in a SINGLE CSS rule, for example, if we want to darken the quote background while hovering over the block quote.

blockquote:hover:after, blockquote:hover:before {
  background-color: # 555;
}
Copy the code

Add transition effects

We can even apply transition properties to them to create beautiful color transitions.

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
Copy the code

Unfortunately, transition effects seem to be supported only in Internet Explorer 10, Firefox, Opera, and Chrome. Hopefully more browsers will catch up in the future and allow transformation attributes to be applied in pseudo-elements.

The original address: www.hongkiat.com/blog/pseudo…