CSS properties: Before &&: The use of After, the difference between pseudo-class and pseudo-elements

one:: Before &&: usage of after

: Before

As with the name of a pseudo-element, :before it is used to insert new content before the content of the specified element. To illustrate:

. Before:before{content: ' You before '; color:red;} <  class= "before"> me</div>

Here we add a property to the pseudo-element :before content and assign the value to you before . Let's look at the effect:

menew content was added before the content of the specified elementyou before

It's not hard for us to find the new content zone added by pseudo-elements the :before default display property value is inline , then we can modify the properties of the new content area, the answer is yes. You can modify its style as you would any other element, so let's change its display property value to block .

. Before:before{content: ' You before '; display:block; color:red;} <  class= "before"> me</div>

Now let's look at the effect:

:beforecreating a new content area from a pseudo-element has turned into a block element

Content Properties

For pseudo-elements :before and :after , properties content must be set, we know that the value of the property can be a string, or it can have other forms, such as pointing to a picture URL :

Content:url ("Img/icon.png")

use with pseudo-class

Pseudo-elements :before can also be used with pseudo-classes, here :before are examples of pseudo-classes that are often used with mates :hover :

. Before:hover:before{content: ' You before '; color:red;} <  class= "before"> me</div>

The mate accessor function attr () uses the

There is also a more common usage, which is used in conjunction with the value function attr() , such as:

a::before{content:attr (title)} <  href= "http://www.segmentfault.com"  title= "professional Chinese technical question and answer community for developers"  ></a>

This achieves the same effect as the following:

<href= "http://www.segmentfault.com"> Professional Chinese technical question and answer community </for developers   a>

: After

The pseudo-element is the same as the :after pseudo-element :before type, except that it specifies the property value that appears after the content content of the specified element, stating the province.

Two: The difference between pseudo-class and pseudo-element

Pseudo-Class types

Pseudo element Kind

pseudo-Class: The Action object is the entire element

For example:

a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child (3) {color: #444}

Although these conditions are not DOM-based, each results in a complete element, such as the entire link, paragraph, div, and so on.

Pseudo elements: Acting on part of an element

For example:

p::first-line {color: #555}p::first-letter {color: #666}a::before {content: "Hello World";}

Pseudo-elements are used as part of an element: the first line of a paragraph or the first letter.

Summarize:

Pseudo-elements are actually the equivalent of forging an element, such as the effect that Before,first-letter achieves is to forge an element, and then add its corresponding effect;

Pseudo-classes have no forged elements, such as first-child just adding styles to child elements.

Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact css3 , in order to differentiate between them, it is clear that pseudo-classes are represented by a colon, while pseudo-elements are represented by two colons.

But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.

See the Rainbow after the rain

Source: http://www.cnblogs.com/moqiutao/

If you feel that this article is helpful to your study, please support and encourage more.

CSS properties: Before &&: The use of After, the difference between pseudo-class and pseudo-elements