::before和::after
css3为了区分伪类和伪元素，伪元素采用双冒号写法。(伪类使用单冒号)
常见伪类:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection
我们来看看::before和::after
样例
::before
首先，我们要知道，::before和::after一般是用来显示修饰性的内容的（图标等），所以我们尽量不要用::before和::after来展示有实际意义的内容。
来看一个元素
<style>
.phoneNumber::before {
content:'\260E';
font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>
它的效果就是这样：
我们并没有引入图片，只是使用了特殊字符，这样我们就省去了引入图片以及对图片样式的调整的步骤。（特殊符号的对应编号可以在这个网站看，快看我）
content属性
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空（content=“ ”)。默认情况下，伪类元素的display是默认值inline，可以通过设置(display: block;)来改变其显示。
content可以取下列值：
| 值 | 作用 |
|---|---|
| string | 向元素中添加字符串 |
| attr() | 调用当前元素的属性，例如将图片alt提示文字或者链接的href地址显示出来 |
| url()/uri() | 用于引用媒体文件 |
| counter() | 调用计数器，可以不适用列表元素实现序号功能，配合counter-increment和counter-reset属性使用。 |
string 即content在元素前显示的内容。可以是一串文字，也可以为其添加font-size，color等各种样式。
attr() 将图片alt提示文字或者链接的href地址显示出来，说起来可能比较不好理解，我们来看看具体效果
<style type="text/css"> a::after{ content: "(" attr(href) ")"; } </style> <a href="https://baidu.com">百度</a>
会显示如下效果
使用了after伪元素，将<a> 的href带入括号中显示。就是这样~
- url()/uri() 就是显示内容链接指向的文件啦~
- counter() 计数器，我们可以使用作者的样例来看看
<style> body{ counter-reset: section; } h1{ counter-reset: subsection; } h1:before{ counter-increment:section; content:counter(section) "、"; } h2:before{ counter-increment:subsection; content: counter(section) "." counter(subsection) "、"; } </style> ------------------------------------------------ <body> <h1>HTML tutorials</h1> <h2>HTML Tutorial</h2> <h2>XHTML Tutorial</h2> <h2>CSS Tutorial</h2> <h1>Scripting tutorials</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML tutorials</h1> <h2>XML</h2> <h2>XSL</h2> </body>
效果如下：
用::after来清除浮动
浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。
这里如果细讲，是讲不完的，我们先给上作者的博客具体页面的链接,宝藏博客
最常用的方法是下列这样
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; }
实现居中浮动的效果
在CSS属性中，是没有float: center这个属性的。所以我们可以让左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
核心的CSS如下：
#page-wrap { width: 60%; margin: 40px auto; position: relative; } #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } #l, #r { width: 49%; } #l { float: left; } #r { float: right; } #l:before, #r:before { content: ""; width: 125px; height: 250px; } /*这里向下*/ #l:before { float: right; } #r:before { float: left; }
出自https://css-tricks.com/float-center/
做各种图形效果
例如我们现在想要做一个六芒星，可以使用如下的代码
<style> #star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six::after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; } </style> <body> <div id="star-six"></div> </body>
它是先让id为star-six的div通过border来做出一个三角形，之后再使用::after在后方做出一个反向的三角形，然后位移令他们重合，这样就可以实现一个六芒星的效果。想法十分的巧妙。
效果如下：
我们经常要做到的图形可以在这个网页里查看，里面给出了许多图形的实现方法
https://css-tricks.com/the-shapes-of-css/
同理，我们也可以通过拼接来实现许多复杂的图形（例如电话等），可以在这里看看
http://nicolasgallagher.com/pure-css-gui-icons/
总结
今天看完这个作者的博客，让我学习到了很多。→作者博客←
他的博客里还有很多关于HTML，CSS，JS的干货，真的是看别人总结出来的知识如饮甘霖，感谢这些作者为我们更好的学习环境出的每一份力！
