The lowdown on :before and :after and pseudo-classes (translated)_html/css_WEB-ITnose

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

Pseudo class VS pseudo element

These two concepts are easily confused, even if you Google or You may not be able to figure it out clearly even if you check the W3C information. The answer is actually very simple, as follows:

Pseudo-class: The object is the entire element

First, let’s 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, the result is that each one acts on a complete element, such as an entire link, paragraph, div, etc.

Pseudo element: acts on a part of the element

Let’s look at a few examples:

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

Like you As you can see, pseudo-elements act on part of an element: the first line or first letter of a paragraph.

What’s even more amazing is that it can act on objects that are not added to HTML. These are :before and :after, which is what this article is about.

:before VS ::before

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

The answer is the same, let’s 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 distinguish the existing two, CSS3 specially designed two colons for the pseudo-element .

IE ruins everything again

All modern browsers support the :: syntax, but the tragic IE8 does not support it. Most developers use CSS2 in order to be compatible with IE. of:. In order to keep it simple and consistent, the rest of this article uses CSS2 format.

What are :before and :after

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

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

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

This code inserts an icon in front of all elements of .phoneNumber. :after has the same effect, you can guess what effect it will have

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

A concise example

One of the reasons :before and :after have become very popular recently is that they can add complexity to pure CSS designs. Instead of redundant tags, we can use pseudo-elements to add additional styleable elements or layers.

Let’s look at an example. This is a simple button that is round and has 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: 2px 2px 4px rgba(0, 0, 0, 0.4); rgba( 0 , 0 , 0 , 0.4 );

box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 );

/*Ridiculous Gradient Syntax*/

background : #e51d16 ; /* Old browsers */

background : -moz-linear-gradient( top , #e51d16 0% , #b21203 100% ); / * FF3.6 */

background : -webkit-gradient(linear, left top , left bottom , color-stop( 0% , #e51d16 ), color-stop( 100% , #b21203 )); /* Chrome,Safari4 */

     background : -webkit-linear-gradient( top ,  #e51d16  0% , #b21203  100% ); /* Chrome10+,Safari5.1+ */

     background : -o-linear-gradient( top ,  #e51d16  0% , #b21203  100% ); /* Opera 11.10+ */

     background : -ms-linear-gradient( top ,  #e51d16  0% , #b21203  100% ); /* IE10+ */

     background : linear-gradient( top ,  #e51d16  0% , #b21203  100% ); /* W3C */

     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#e51d16' , endColorstr= '#b21203' ,GradientType= 0  ); /* IE6-9 */

}

效果如下：

现在，我们需要在按钮的外围添加一层稍暗的区域，并且给它一个内阴影效果，看起来就像是嵌入的一样。这次，我们不用添加额外的标签，只需要用一个空的伪元素。

.button:before {    content:"";}

现在我们开始实现想要的效果。

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

现在按钮看起来更立体了。 :before 实现了外围的圆环。我们把z-index设置为-1，使它位于按钮的下方，并且使用相对定位校正位置。

接下来，我们又想加一层同样的效果。这一次，我们使用 :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);}

效果如下：　

通过 :before 和 :after 你还能做什么？

使用很广泛，下面给出几个比较流行的例子

清除浮动

CSS的浮动很让人头痛，世界各地的开发者都在寻找更好的解决方法。

Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个，即利用 :before 和 :after 清除浮动。

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

这里 :before 阻止了 top-margin 合并， :after则用于清除浮动，这种方法做的极为干净漂亮。

你也许会说还有 overflow: hidden; 方式呢！当然这也是一种可选方案，当你发现overflow不合适的时候，可以选择这里提到的方式。

CSS图形

使用纯CSS实现某些复杂的图形是不是很有趣？通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。

CSS3Shapes.com 有很多例子，这里就举一个八边形的例子。

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

可以看到，通过定位、设置border，我们就能把一些简单的形状组合成复杂的图形，相当的酷！