用一个例子学习CSS的伪类元素_html/css_WEB-ITnose

　　CSS伪类元素是一个非常酷的东西！首先我们理解一下它，:before :after 伪类元素，也就是虚假的元素。它可以插入在元素的前面或者后面，而在HTML文档结构中，它却是不存在的，因为Js是无法通过DOM去控制它的。而其用法也很简单，和一些伪类一样，如：a:hover, a:active。那么伪元素这里便是 a:before, a:after。

　　关于伪元素，最重要的一个属性便是 content 属性，如果CSS中的伪元素没有content属性，那么这个伪元素就是没有任何效果的。但是我们可以给它传入一个空值，来表示这个伪元素并没有东西。content: "",那么我们先直观感受一下伪元素的效果。

　　非常明显，我们在开发者模式里是看不见这些伪元素的，但却又确确实实被渲染出来了！这样我们可以不影响HTML结构下，非常灵活的利用这样的伪元素去做一些事情。还有我们从中也可以知道，这些伪元素生成的元素都是一些内联元素，如有必要，我们可以手动让它变成块级元素。

　　当然content也不仅限于传入文本，图片url(img.jpg)。最厉害的是元素的属性都可以作为参数传进来，如 attr(href)，这里的意思就是将元素的href值以文本的形式作为伪元素的content。

 

　　重点当然是动手，下面就是我们一起用CSS的伪元素做一个非常酷的东西。

这便是我们的例子，用CSS的伪元素画出一个太极，乍一看，是不是觉得不可思议呢？其实非常的简单，我们继续看。

　　首先，这个div它的黑色部分全部是通过border-bottom实现的，让border-bottom和height的总和去等于width，再配合上border-radius就可以轻松实现一个圆上下黑白的颜色。然后这里有一个relative，是为了限制接下来伪元素的absolute的，这样一看，是不是有点眉目了呢？那我们继续看。

　　接下来便用到了我们的伪元素。我们让伪元素的content为空，然后通过height,width,border和border-radius的配合，实现同心圆的效果，并用不同的颜色和absolute和left,top值进行选择性覆盖。当然另一边同样使用这种方法，自然非常酷的八卦图就出来了。

　　动手要紧，觉得酷的赶紧试一下吧！

　　最后再说多一句，通过CSS + CSS3我们可以制作非常多的东西，大胆发挥你的想象，并始终牢记一点：“多动手！”