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

Today, the editor will share with you how to understand the pseudo-elements of css: before and: after, with detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Syntax and browser support for css pseudo-elements

: before and: after pseudo elements actually revolve around CSS1, but here we are talking about: before and: after released on CSS2.1. In the beginning, pseudo elements use the syntax of single colons, so the pseudo elements of CSS3, which evolved as web, are modified to use double colons to:: before&::after- to distinguish them from pseudo classes (that is, hover,:active, etc.).

360 screenshot 20181102141413152.jpg

However, whether you use a single colon or a double colon format, the browser will still recognize it. And because InternetExplorer8 only supports single colons, it is safer to use single colons if you want wider browser compatibility.

What is the purpose of css pseudo-elements?

In short, pseudo elements insert an extra element before or after the content element, so when we add them together, they are technically equal with the following markup.

: before

Thisthemaincontent.

: after

However, these elements are not actually generated in the document. They are still visible on the surface, but they will not be found on the document source, so in fact they are pseudo elements.

The usage of pseudo elements

Using pseudo elements is relatively easy; the following syntax selector:before will add an element before the selector of the content, and this syntax selector:after will be added later, and to add content to it, we can use the content attribute.

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

Blockquote:before {

Content:open-quote

}

Blockquote:after {

Content:close-quote

}

Style pseudo element

Although pseudo-elements are pseudo-elements, pseudo-elements are actually like "real" elements; we can add any style declaration to them, such as changing color, adding background, resizing, aligning the inside of the text, 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

}

Css pseudo elements specify dimensions

By default, the generated element is an inline element, so when we want to 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

/ * * defineitasablockelement**/

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

/ * * defineitasablockelement**/

Display:block

Height:25px

Width:25px

}

Attach a background picture

We can also replace content with images instead of plain text. Although this content property provides a string that url () inserts into the image, in most cases I prefer to use this background attribute to have 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

}

However, as you can see from the code snippet above, we still declare it even when the content in the content attribute is an empty string. Content represents a requirement that should always exist; otherwise the pseudo element will not work properly.

Associative pseudo class

Pseudo-classes and pseudo-elements are different, but we can use pseudo-classes with pseudo-elements in a CSS rule. For example, if we want to darken the quotation mark background slightly, the blockquote change code is as follows when we hover over it.

Blockquote:hover:after,blockquote:hover:before {

Background-color:#555

}

Add transition effect

We can even apply the transition attribute to them to create some nice transitions.

Transition:all350ms

-o-transition:all350ms

-moz-transition:all350ms

-webkit-transition:all350ms

Unfortunately, the conversion effect seems to apply only to the latest version of Firefox. So it is hoped that more browsers will catch up and allow pseudo elements to be applied to transition attributes in the future.

These are all the contents of the article "how to understand css pseudo elements: before and: after". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.