: Before and: Insider of After and Pseudo class (GO)

Original link http://www.cnblogs.com/zhujl/archive/2012/05/08/2489411.html

--------------------------------------------------------------------------------------------------------------- ---------------------

Pseudo-Class VS pseudo-element

These two concepts are easy to confuse, even if you have Google or the information you are looking for is not necessarily clear. The answer is really simple, as follows:

Pseudo-Class: The Action object is the entire element

First, look at a few pseudo-classes

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

As you can see, although these conditions are not DOM-based, each result is a complete element, such as the entire link, paragraph, div, and so on.

Pseudo elements: Acting on part of an element

Let's look at a few examples:

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

As you can see, a pseudo-element is used as part of an element: the first line of a paragraph or the first letter.

Even more magical is that it can be used for objects that are not added to HTML, which is: Before and: After, which is what this article says.

: Before VS:: Before

Why are there two ways to do it? Do they have the same effect?

The answer is the same, look at an example:

/*css2*/.example:before {}.example:after {}.example:first-child {}  /*css3*/.example::before {}.example::after { }.example::first-child {}

In CSS2, we use a colon to represent pseudo-classes and pseudo-elements. However, in order to differentiate between the two existing ones, CSS3 specifically designed two colons for pseudo-elements .

IE ruined everything again.

All modern browsers support:: syntax, but tragic IE8 not supported, most developers in order to compatible with IE, using CSS2:. To keep it simple and consistent, the sections later in this article are in CSS2 format.

What is: Before and: After

: Before and: After allows you to add some content through CSS, thus avoiding the clutter of HTML. In particular, some decorative elements, from the semantic considerations should not appear in the HTML.

For example, your website has some phone numbers, and you want to add an icon in front of them? You can use: before pseudo-elements to achieve this effect:

. phonenumber:before {    content: "?";    font-size:15px;}

This code causes all elements of the. PhoneNumber to have an icon inserted before it. : After action, you can guess what happens.

. phonenumber:after {    content: "$ #9742";    font-size:15px;}

A concise example.

Recent,: Before and: One of the reasons that after became very popular is that they can increase the complexity of pure CSS design. No extra tags are needed, and we can use pseudo elements to add extra elements or hierarchies that can be styled.

To take a look at an example, this is a simple button, rounded and with a red gradient.

.button {    height: 100px;    width: 100px;    position: relative;    margin: 50px;    color: white;    text-align: center;    line-height: 100px;    /*Rounded Corners and Shadows*/    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: 2px2px4pxrgba(0,0,0,0.4);    -moz-box-shadow: 2px2px4pxrgba(0,0,0,0.4);    box-shadow: 2px2px4pxrgba(0,0,0,0.4);    /*Ridiculous Gradient Syntax*/    background: #e51d16; /* Old browsers */    background: -moz-linear-gradient(top,  #e51d160%, #b21203100%); /* FF3.6+ */    background: -webkit-gradient(linear, lefttop, leftbottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(top,  #e51d160%,#b21203100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(top,  #e51d160%,#b21203100%); /* Opera 11.10+ */    background: -ms-linear-gradient(top,  #e51d160%,#b21203100%); /* IE10+ */    background: linear-gradient(top,  #e51d160%,#b21203100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#e51d16‘, endColorstr=‘#b21203‘,GradientType=0); /* IE6-9 */}

The effect is as follows:

Now we need to add a slightly darker area to the periphery of the button and give it an inner shadow effect that looks like it's embedded. This time, we don't need to add extra tags, just use an empty pseudo-element.

. button:before {    content: "";}

Now we are starting to achieve the desired effect.

. button:before {    content: "";    width:100%;    height:100%;    Display:block;    Z-index:-1;    position:relative;    padding:15px;    Background: #ddd;    Left: -15px;    Top: -15px;    -webkit-border-radius:100px;    -moz-border-radius:100px;    border-radius:100px;    -webkit-box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);    -moz-box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);    Box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);}

Now the buttons look more solid. : The before implements the perimeter ring. We set the Z-index to 1 so that it is below the button and uses relative positioning to correct the position.

Next, we want to add a layer of the same effect. This time, we use: After

. button:after {    content: "";    width:100%;    height:100%;    Display:block;    Z-index:-2;    position:relative;    padding:25px;    Background: #eee;    Position:absolute;    Left: -25px;    Top: -25px;    -webkit-border-radius:100px;    -moz-border-radius:100px;    border-radius:100px;    -webkit-box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);    -moz-box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);    Box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);}

The effect is as follows:

By: Before and: After what else can you do?

Widely used, here are a few of the more popular examples

Clear floating

CSS floats are a headache, and developers around the world are looking for better solutions.

The approach proposed by Nicolas Gallagher may be one of the most popular today, using: Before and: after clearing floats.

/* For modern browsers */.cf:before,.cf:after {    content: "";    display:table;}  . cf:after {    clear:both;}  /* for IE 6/7 (trigger Haslayout) */.cf {    zoom:1;}

Here: Before blocked Top-margin merge: After is used to clear the float, this method is extremely clean and beautiful.

You may say there are overflow:hidden; Way it is! Of course this is also an option, and when you find overflow inappropriate, you can choose the way it is mentioned here.

CSS Graphics

Isn't it interesting to use pure CSS to implement some complex graphics? These graphs can be implemented with ingenious manipulation of border and some pseudo-elements.

There are many examples of css3shapes.com, here is an example of a eight-edge shape.

#octagon {   width:100px;   height:100px;   Background:blue;}  #octagon: before {   height:0;   width:40px;   Content: "";   Position:absolute;   border-bottom:30px solid blue;   border-left:30px solid white;   border-right:30px solid white; }  #octagon: after {   height:0;   width:40px;   Content: "";   Position:absolute;   border-top:30px solid blue;   border-left:30px solid white;     border-right:30px solid white;    margin:70px 0 0 0;}

As you can see, by positioning and setting border, we can combine some simple shapes into complex graphics that are pretty cool!

: Before and: Insider of After and Pseudo class (GO)