转载【CSS进阶】伪元素的妙用--单标签之美

1.单个颜色实现按钮 hover 、active 的明暗变化

请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

2.利用after伪类清除浮动

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

3.增强用户体验，使用伪元素实现增大点击热区。适合用在点击区域较小的移动端,PC端看上去是很奇怪的哦

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>扩大点击热区域</title>
 6         <style>
 7             .click-area {
 8                 position: absolute;
 9                 left: 50%;
10                 top: 50%;
11                 transform: translate(-50%,-50%); /*触发层叠上下文*/
12                 width: 240px;
13                 text-align: center;
14                 line-height: 100px;
15                 background-color: #00aabb;
16                 color: #fff;
17                 font-size: 200%;
18                 border-radius: .5em;
19             }
20             .click-area:hover:after {
21                 content: "AAA";
22             }
23             .click-area:after {
24                 position: absolute;
25                 left: -10px;
26                 top: -10px;
27                 right: -10px;
28                 bottom: -10px;
29                 background-color: deeppink;
30                 border-radius: .5em;
31                 z-index: -1;
32             }
33         </style>
34     </head>
35     <body>
36         <a class="click-area">click-Area</a>
37     </body>
38 </html>

View Code