Pseudo elements: Before AND: After learning

Cascading Style Sheets (CSS) are mainly used to add styles to HTML elements. However, in some cases, adding additional elements to documents is unnecessary or impossible. In fact, CSS has a feature that allows us to add additional elements without disturbing the document itself. This is a "pseudo element ".

You must have heard of this word, especially when you keep following our tutorials. Click here to browse other original articles

In fact, some CSS family members (CSS selectors) are classified as pseudo elements such as: first-line,: first-letter,: selection,: before and: after. However, in this article, we will limit the scope of our discussion to the following two elements: before AND: after. Therefore, the "pseudo element" in this article will specifically refer to these two pseudo elements (: before AND: after). We will start from the basics to study this unique topic.

Syntax and browser support

Pseudo elements actually exist in CSS1, but the following: before AND: after are discussed in CSS2.1. At the beginning, the syntax of pseudo elements was to use ":" (a colon). With the development of web, the revised pseudo elements in CSS3 use ":" (two colons ), that is,: before AND: after-to distinguish between pseudo elements and pseudo classes (such as hover and active)

However, whether you use a single colon or a double colon, the browser can recognize them. IE8 only supports the single colon format. For security reasons, if you want more extensive browser compatibility, use the single colon format!

What does it do?

In short, pseudo elements will insert additional elements before and after the content elements, so when we add them, they are technically equal using the following tag method.

12345

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

However, these elements are not actually generated in the document. They will be visible outside, but you will not find them in the source code of the document, so they are actually "fake" elements.

Use pseudo elements

It is relatively easy to use pseudo elements. before will "add" an element before the content, and "after" will "add" an element after the content. We can use the content attribute to add content among them.

For example, the following code snippet adds a quotation mark before and after the reference.

 

123456

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

Pseudo element style

Although as a "false" element, in fact, pseudo elements are like "real" elements, we can add any style to them, such as changing their color, adding the background color, adjusting the font size, and adjusting the text in them.

1234567891011121314151617181920212223

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

Specify pseudo element size

The default generated element is an inline element, so when we want to specify their height and width, we first have to declare them as block-level elements using the display: block.

　　Because float has been set, you do not need to set display: black.

12345678910111213141516171819202122232425262728

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; 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; height: 25px; width: 25px;}

Associate background images

We can also replace the image content instead of plain text. Although the content attribute providesurl()But in more instances, I prefer to use the background (Background) attributesTo better control the image.

1234567891011121314151617181920212223242526272829303132333435

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

However, as you can see from the code snippet above, we still declare the content attribute and use an empty string. The content attribute is required and should be applied frequently. Otherwise, the pseudo element cannot work normally in any way.

Combined with pseudo classes

Although there are different types of pseudo X (pseudo elements, pseudo classes), we can use pseudo classes together with pseudo elements to put them into a CSS rule, for example, if we want to move the mouse over blockqoute, the background color of the quotation marks will be slightly deeper.

123	blockquote:hover:after, blockquote:hover:before { background-color: #555;}

Add transition effect

We can even apply the transition attribute on the pseudo element to create an excellent color transition effect.

1234	transition: all 350ms;-o-transition: all 350ms;-moz-transition: all 350ms;-webkit-transition: all 350ms;

More inspiration

To inspire you, we have selected three cool examples, which can give you a lot of ideas in web design.

Charming shadow

In this tutorial, Paul Underwood explains how to create more realistic and attractive shadow effects.

Use pseudo elements:beforeAnd:after. Both of them are absolute positioning, and the negative z-index is used to place them at the rear of the image for shadow effect.

3D buttons

This is a very clever implementation. It uses pseudo elements combined with CSS3 box-shadow to draw a surprising 3D button. It only uses CSS and a single anchor text. Pseudo element: before is used to add the number "1" to the left of the button ".

Overlapping image effects

It is also possible to use a pseudo element to create a "messy" image with only one image tag to overlay the image. The pseudo element is used to create an image stack. By using a Negative z-index value, the "superimposed" image is placed behind the real image.

Conclusion

Pseudo elements are cool and can be applied to actual work. Basically, every element we add will not interfere with the existing HTML structure, in addition, pseudo elements can achieve almost all things we can think.

In fact, there are some improvement work on pseudo elements, which are gradually carried out, such as pseudo Element Nested div: before {content: ";}and multiple pseudo element div :: before (3) {content :";}. Obviously, in future web design, these improvements will give our design more forms (more possibilities ). However, they will be supported in the latest browsers. Let's wait patiently now!

Source: Thoriq Firdaus