标签:ini 伪元素 margin white name 结构 init dev lang
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素练习</title> <style> .box{ width:200px; height:200px; background-color:grey; float: left; margin-left:50px; margin-top: 50px; text-align: center; } /* 在a元素内容之前 */ .a::before{ content:attr(data-info); /* width:50px; height:20px; */ padding:2px 10px; line-height: 20px; text-align: center; background-color: hotpink; color:white; font-size:12px; } /* css动态设置文本内容 1:将文本内容作为信息插入到结构元素身上 属性名=属性值 统一属性名 data-* data-info data-star data-u 2:取信息 attr(data-*) */ </style> </head> <body> <div class="box a" data-inf="享八折"></div> <div class="box a" data-inf="减500元"></div> <div class="box"></div> </body> </html>
标签:ini 伪元素 margin white name 结构 init dev lang
原文地址:https://www.cnblogs.com/xuixui/p/12362157.html