伪类元素before&after

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 height: 200px;
 9                 background: yellow;
10             }
11             /* before after伪类   必须有content属性才能起作用,值字符串
12              * 相当于子标签,行内元素 */
13             .box:after{
14                 content: 'hello world';
15                 background-image: url(arrow.png);
16                 background-size: 100% 100%;
17                 display: block;
18                 width: 100px;
19                 height: 100px;
20                 border: 1px solid darkred;
21             }
22             
23         </style>
24     </head>
25     <body>
26         
27         <div class="box">
28             打开发动机阿斯蒂芬静安寺多路阀三阶段
29             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
30             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
31             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
32             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
33             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
34         </div>
35         
36         
37     </body>
38 </html>

2

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 height: 200px;
 9                 background: yellow;
10                 /*border-bottom: 1px solid #000;*/
11                 position: relative;
12             }
13             
14             
15             
16             /* 通过伪类将逻辑1像素在高清屏下,实现物理1像素 */
17             .box:after{
18                 content: '';
19                 display: block;
20                 height: 1px;
21                 width: 100%;
22                 border-bottom: 1px solid #000;
23                 position: absolute;
24                 left: 0;
25                 bottom: -1px;
26                 transform: scaleY(0.5);
27             }
28             .box:before{
29                 content: '';
30                 height: 1px;
31                 width: 100%;
32                 border-top: 1px solid #000;
33                 position: absolute;
34                 left: 0;
35                 top: -1px;
36                 transform: scaleY(0.5);
37             }
38             
39         </style>
40     </head>
41     <body>
42         
43         <div class="box">
44             
45         </div>
46         
47         
48     </body>
49 </html>

3

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 height: 200px;
 9                 background: yellow;
10                 /*border-bottom: 1px solid #000;*/
11                 position: relative;
12             }
13             
14             
15             
16             /* 通过伪类将逻辑1像素在高清屏下,实现物理1像素 */
17             
18             /*.box:before{
19                 content: '';
20                 height: 100%;
21                 width: 1px;
22                 border-left: 1px solid #000;
23                 position: absolute;
24                 left: -1px;
25                 top: 0;
26                 transform: scaleX(0.5);
27             }*/
28             
29             .box:before{
30                 content: '';
31                 height: 100%;
32                 width: 1px;
33                 border-right: 1px solid #000;
34                 position: absolute;
35                 right: -1px;
36                 top: 0;
37                 transform: scaleX(0.5);
38             }
39             
40             
41         </style>
42     </head>
43     <body>
44         
45         <div class="box">
46             
47         </div>
48         
49         
50     </body>
51 </html>

4

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 height: 200px;
 9                 background: yellow;
10                 /*border-bottom: 1px solid #000;*/
11                 position: relative;
12             }
13             
14             
15             
16             /* 通过伪类将逻辑1像素在高清屏下,实现物理1像素 */
17             .box:after{
18                 content: '';
19                 display: block;
20                 height: 1px;
21                 width: 100%;
22                 border-bottom: 1px solid #000;
23                 position: absolute;
24                 left: 0;
25                 bottom: -1px;
26                 transform: scaleY(0.5);
27             }
28             .box:before{
29                 content: '';
30                 height: 1px;
31                 width: 100%;
32                 border-top: 1px solid #000;
33                 position: absolute;
34                 left: 0;
35                 top: -1px;
36                 transform: scaleY(0.5);
37             }
38             .box .left{
39                 height: 100%;
40                 width: 1px;
41                 border-left: 1px solid #000;
42                 position: absolute;
43                 left: -1px;
44                 top: 0;
45                 transform: scaleX(0.5);
46             }
47             .box .right{
48                 height: 100%;
49                 width: 1px;
50                 border-right: 1px solid #000;
51                 position: absolute;
52                 right: -1px;
53                 top: 0;
54                 transform: scaleX(0.5);
55             }
56         </style>
57     </head>
58     <body>
59         
60         <div class="box">
61             <span class="left"></span>
62             <span class="right"></span>
63         </div>
64         
65         
66     </body>
67 </html>

 

posted @ 2017-09-15 14:05  铜镜123  阅读(190)  评论(0编辑  收藏  举报