Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use css pseudo elements before and after". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use css pseudo elements before and after".

The main purpose of cascading style sheets (CSS) is to add styles to HTML elements, however, in some cases adding additional elements to a document is redundant or impossible. In fact, there is a feature in CSS that allows us to add extra elements without disturbing the document itself, which is the "pseudo element".

You must have heard this word, especially if you have been following our tutorials. Click here to browse other articles of the original author

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

About syntax and browser support

Pseudo elements actually exist in CSS1, but what we're talking about now: before and: after are published in CSS2.1. Initially, the syntax of pseudo elements is to use ":" (a colon). With the development of web, revised pseudo elements in CSS3 use "::" (two colons), that is,:: before and:: after- to distinguish pseudo elements from pseudo classes (for example, hover,:active, etc.)

However, whether you use single colons or double colons, browsers will recognize them. Since IE8 only supports single colons, for security reasons, if you want wider browser compatibility, use single colons!

What does it do?

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

: before This the main content. : after

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

Use pseudo elements

Using pseudo elements is relatively easy,: 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 to them.

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

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

Pseudo element style

Although as "false" elements, pseudo elements actually behave like "real" elements, we can add any style to them, such as changing their colors, adding background colors, resizing fonts, adjusting the text in them, and so on.

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

Because float is already set, there is no need to set display:black.

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

Associated background image

We can also replace content with pictures instead of just plain text. Although the content property provides url () to insert an image, in more instances, I prefer to use the background attribute to have more control over the 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;}

However, as you can see from the code snippet above, we still declare the content attribute and use an empty string at this time. The content attribute is required and should be applied frequently. Otherwise, the pseudo-element will not work properly anyway.

Associative pseudo class

Although there are different types of pseudo-Xs (pseudo-elements, pseudo-classes), we can use pseudo-classes to put them into a CSS rule along with pseudo-elements, for example, if we want the background color of quotation marks to be slightly darker when our mouse moves over blockqoute.

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

Add transition effect

We can even apply the transition attribute to pseudo elements to create a graceful color transition.

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

More inspiration.

To inspire you, we have chosen three cool examples that can give you a lot of ideas on web design.

Charming shadows (http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)

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

Use pseudo elements: before and: after. Both of them are absolutely positioned and use negative z-index to place them behind the image to achieve a shadow effect.

3D button

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

Overlay image effect

It is also possible to use pseudo elements to create a "messy" overlay image effect only by relying on an image tag. Pseudo elements are used to create the illusion of image overlay by using a negative value of z-index to make the "superimposed" image behind the real image.

Thank you for your reading, the above is the content of "how to use css pseudo elements before and after". After the study of this article, I believe you have a deeper understanding of how to use css pseudo elements before and after, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.