伪类元素before&after
Posted 铜镜123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了伪类元素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>
以上是关于伪类元素before&after的主要内容，如果未能解决你的问题，请参考以下文章