Understanding the pseudo elements in CSS: before AND: after

The main purpose of CSS is to add styles to HTML elements. However, it is unnecessary or impossible to add additional elements to documents in some cases. In fact, CSS has a feature that allows us to add additional elements without disturbing the document itself. This is a "pseudo element ".

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.

123456blockquote: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.

1234567891011121314151617181920212223blockquote: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.

12345678910111213141516171819202122232425262728blockquote: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.

123blockquote: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!

Link: http://www.cnblogs.com/oooweb/p/css-pseudo-element-before-and-after.html

Source: Thoriq Firdaus