首页 > 代码库 > 转载 【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>
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>
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>
平行四边形 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>
文章转载 【CSS进阶】伪元素的妙用--单标签之美
转载 【CSS进阶】伪元素的妙用--单标签之美
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。