常见伪元素:
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
其中::before和::after常用在项目中,巧妙的运用会会使很多样式的实现变得非常简单.
一般地,我们不去用::before和::after展示实际性的页面内容,多是修饰性的,像icon,角标,行标,还可以配合content清除浮动.
::before显示电话前的电话机icon:
<style type="text/css">
.phoneNumber::before {
content:'\260E';
font-size: 15px;
}
</style>
</head>
<body>
<p class="phoneNumber">12345645654</p>
</body>
content属性:
::before和::after必须配合content属性来使用,content用来定义插入的内容 ,content可取以下值。
1 ) string
引号括起来的一段字符串,显示到当前元素的前后:
p::before{
content: "《";
}
p::after{
content: "》";
}
<p>平凡的世界</p>
//效果《平凡的世界》
2 ) attr()
通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。
<style>
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.csdn.com/starof">博客地址</a>
//效果 博客地址(http://www.csdn.com/starof)
3 ) url()/uri()
用于引用媒体文件。
举例:“百度”前面给出一张图片,后面给出href属性。
<style>
a::before{
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
content:"("attr(href)")";
}
a{
text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body>
### 4 ) counter()
调用计数器,实现章节序号功能。
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h2 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: counter(section) "、";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) "、";
}
h3:before {
counter-increment: subsection;
content: counter(section) "." counter(section) "."counter(subsection) "、";
}
</style>
</head>
<body>
<h1>大标题</h1>
<h2> 二副</h2>
<h2> 二副</h2>
<h2> 二副</h2>
<h3>  三副</h3>
<h3>  三副</h3>
<h3>  三副</h3>
</body>
运用
1、清除浮动
清除浮动方法有多种,现在最常用的就是下面这种方法,仅需要以下样式即可在元素尾部自动清除浮动
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
2、float:居中
我们知道float没有center这个取值,但是可以通过伪类来模拟实现。
这个效果实现很有意思,左右通过::before float各自留出一半图片的位置,再把图片绝对定位上去。
3、做出各种图形效果
案例:六芒星
div做成三角形,将::after做成倒三角,绝对定位到div上
#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;
}
不了解CSS绘制图形的点这里→Shape of CSS
4、超链接特效
举例:配合 CSS定位实现一个鼠标移上去,超链接出现方括号的效果
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right: -10px; }
常见的伪元素用法就说这么多,另外
附上一个有趣的连接:使用CSS3实现各类图形,效果满分