首页 > 代码库 > 转载 【CSS进阶】伪元素的妙用--单标签之美

转载 【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

4.利用伪类元素实现换行,替换<br/>标签

技术分享
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>利用伪类实现换行,替换br标签</title>
 6         <style>
 7             body {
 8                 font: 150%/1.6 Baskerville, Palatino, serif;
 9             }
10             dt, dd {
11                 display: inline;
12                 margin: 0;
13             }
14             dd {
15                 font-weight: 600;
16             }
17             dt::after {
18                 content: "\A"; /*换行*/
19                 white-space: pre;
20             }
21             dd + dd::before {
22                 content: ‘, ‘;
23                 font-weight: normal;
24                 margin-left: -.25em;
25             }
26         </style>
27     </head>
28     <body>
29         <dl>
30             <dt>书籍分类</dt>
31             <dd>经典著作  · 哲学类  </dd>
32             <dd>社会科学  · 政治法律  </dd>
33             <dd>军事科学  · 财经管理</dd>
34             <dd>历史地理  · 文化教育  </dd>
35         </dl>
36     </body>
37 </html>
View Code

5.变形恢复【为了平面图形变形后可以不让文字变形】

技术分享技术分享

菱形diamond

技术分享
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>菱形</title>
 6         <style>
 7             html {
 8                 font-family: "microsoft yahei";
 9             }
10             .diamond {
11                 position: absolute;
12                 left: 50%;
13                 top: 50%;
14                 transform: translate(-50%, -50%);
15                 width: 200px;
16                 line-height: 200px;
17                 text-align: center;
18                 color: #FFFFFF;
19                 font-size: 200%;
20             }
21             .diamond::before {
22                 content: "";
23                 position: absolute;
24                 left: 0;
25                 top: 0;
26                 bottom: 0;
27                 right: 0;
28                 background-color: deeppink;
29                 transform: rotateZ(45deg);
30                 z-index: -1;
31                     
32             }
33         </style>
34     </head>
35     <body>
36         <div class="diamond">.diamond</div>
37     </body>
38 </html>
View Code

平行四边形 parallelogram

技术分享
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>平行四边形</title>
 6         <style>
 7             html {
 8                 font-family: "microsoft yahei";
 9             }
10             .parallelogram {
11                 position: absolute;
12                 left: 50%;
13                 top:50%;
14                 transform: translate(-50%,-50%);
15                 width: 280px;
16                 text-align: center;
17                 line-height: 150px;
18                 font-size: 200%;
19                 color: #FFFFFF;
20             }
21             .parallelogram::before {
22                 content:"";
23                 position:absolute ;
24                 left: 0;
25                 right: 0;
26                 bottom: 0;
27                 top: 0;
28                 background-color: #00AABB;
29                 color: orangered;
30                 z-index: -1;
31                 transform: skew(-.07turn);
32             }
33         </style>
34     </head>
35     <body>
36         <div class="parallelogram">.parallelogram</div>
37     </body>
38 </html>
View Code

 

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

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