重点：
伪元素制作动态列表项中：content内容区使用arr（），可以制作动态数据添加
下面代码中的案例
<!-- 自定义属性 属性名自己定 -->
<a href="" class="clearfix" xh="11">
/* attr(属性名) 获取该属性名字对应的属性值 */
content: attr(xh);
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素列表菜单</title> <style> * { padding: 0; margin: 0; } ul { list-style: none; } .list-box { width: 280px; height:auto; margin: 0 auto; } .item { width: 100%; height: 40px; line-height: 40px; margin-top: 20px; } /* 灰色盒子 */ .item .name-box { width: 220px; height: 100%; border-radius: 3px; background-color: #edeeee; font-size: 18px; color: #333; float: left; padding-left: 20px; } /* 伪元素插入位置 a::before {} */ .item a::before { /* content: '1'; */ /* attr(属性名) 获取该属性名字对应的属性值 */ content: attr(xh); width: 40px; height: 100%; /* display: block; */ float: left; background-color: #404f60; color: #fff; line-height: 40px; text-align: center; border-radius: 4px; } .item:hover .name-box { background-color: #cfd8dc; color: #fff; } .item:hover { height: 41px; } .item a { display: block; } .clearfix::after { content: ''; display: block; clear:both; } </style> </head> <body> <ul class="list-box"> <li class="item"> <!-- 自定义属性 属性名自己定 --> <a href="" class="clearfix" xh="11"> <!-- div :before --> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="12"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="13"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item" > <a href="" class="clearfix" xh="14"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="15"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="16"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="17"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="18"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="19"> <div class="name-box">Dr Nice</div> </a> </li> <li class="item"> <a href="" class="clearfix" xh="20"> <div class="name-box">Dr Nice</div> </a> </li> </ul> </body> </html>
效果图
