Detailed CSS Properties-: Before &&: After

Now we often html see the following wording in the source code:

And here ::after is the second of the ::before pseudo-elements we are going to explore today css :before && :after .

Pseudo element

First we need to understand what pseudo-elements are, and css set up pseudo-elements to make it easier to add special effects to certain selectors. The syntax format for pseudo-elements is generally:

selector:pseudo-element {property:value;}

This refers to the property properties of the pseudo-element. In addition, css classes can be used in conjunction with pseudo-elements in the following format:

selector.class:pseudo-element {property:value;}

The pseudo-element is the effect of adding a style to the specified selector by assigning a property to itself.

: 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;}<div 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;}<div 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 :before -elements and :after , is the property content a required option? We tried to content remove it.

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

Without content attributes, the new content is naturally empty
At the same time we look at the html source code will find that :before is not effective

So we're set to empty?

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

New content is still empty
Effective at this time :before

So we understand that for pseudo-elements :before and in terms of properties that must be :after content set, then in the above example, we know that the value of the property can be a string, then can also be other forms? The answer is yes, it can also point 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;}<div class="before"> me</div>

No content

When you move the mouse div over, the new content appears.

It is important to note the order in which the pseudo-elements should be located later, if the order .before:before:hover is invalid.

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)}<a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>

At this point the effect is equivalent to:

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>

: After

A pseudo-element is the same as a :after pseudo-element :before type, except that it specifies a property content value that appears after the content of the specified element, as well as an example:

.after:after{content:‘after you‘; color:#F00;}<div class="after">I </div>

A :after new content area generated by a pseudo-element appears in the next face of the specified element content

:afterOther characteristics and the :before same, you can refer to the above, here do not repeat.

Detailed CSS Properties-: Before &&: After