伪类属性、伪类元素，因为不同于别的HTML功能性、语义性标签，却有它存在的价值，值得我们玩味。今天 咱们来看看 关于伪类元素的那些事
首先回顾一下咱们接触过的 伪类属性
也就是我们所说的爱恨法则：
- L : link: 未访问的链接
- o
- V : visited 已访问的链接
- e
- a
- n
- d
- H : hover 鼠标移动到链接上
- A
- t : active 选定的链接
- e
CSS 定义中
- 在 a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- a:active 必须被置于 a:hover 之后，才是有效的。
- 伪类名称对大小写不敏感。
在实际的使用中 除了 hover 属性，其余的这几个使用频率较低！
好了废话不多说 ，来谈谈重点吧
before after 的妙用
或许有人先前接触过 before 和 after，不过使用的方式局限于：给文字前后加内容
1
2
3
4
| div:before{
content:'Someone saies:';
background:red;
}
|
亦或者是这样：添加色块 或者 添加图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| div{
position:relative;
}
div:before{
content:url(../images/demo.jpg);
width:15px;
height:15px;
}
div:after{
content:'';
width:15px;
height:15px;
background:grey;
display:block;
position:absolute;
left:0;
top:0;
}
|
但是 就 before 、after 而言，它还有其他的用途：
例如：
1
2
3
4
| p:before {
content: open-quote;}
p:after{
content: open-quote;}
|
在这里我将向大家演示，如何做出上图的效果:
HTML part：
1
2
3
| <div class="box effect">
<h3>TEST txt</h3>
</div>
|
CSS part：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| .box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect
{
position: relative;
}
.effect:before, .effect:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.effect:after
{
transform: rotate(8deg);
right: 10px;
left: auto;
}
|
事实上 就是这么简单
为了给大家加深巩固一下，
我在给大家做这个效果：
HTML part：
1
2
3
| <div class="box effect">
<h3>TEST txt</h3>
</div>
|
CSS part：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| .box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect
{
position:relative;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/*给元素本身加相对定位，并设置一个外阴影，一个内阴影（inset）*/
.effect:before, .effect:after
{
content:"";
position:absolute;
z-index:-1;
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
border-radius:100px / 10px;
}
.effect:after
{
right:10px;
left:auto;
transform:skew(8deg) rotate(3deg);
/*变形 旋转*/
}
|
这里巧妙地运用了 CSS3的一些变形和阴影效果
接下来留一份问题给你，请问如下的图片效果怎么用 after before 做出来？
做出来的小伙伴可以在留言区留言或者 发送我的邮件，我将第一时间给你解答 1160948478@qq.com
Yours sincerely SunPing
