解释 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。 伪元素：用于创建不在文档树中的元素，并为其添加样式。 以下为使用其创建的一些简单样式，仅作参考： 代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类和伪元素demo</title> <style> .demo1{ width: 50px; height: 100px; background-color: red; position: relative; transition: transform 1s; margin-top: 40px; } .demo1::after{ content: ""; position: absolute; bottom: -40px; left: 0; width: 50px; height: 20px; border-radius: 50%; background-color: red; transition: translate(-50%,0); transition: transform 1s; } .demo1:hover{ transform:translateY(-20px); transition: transform 1s; } .demo1:hover::after{ transform:translate(0,20px) scale(0.75); transition: transform 1s; } /* 文字左右加横线 */ .demo2{ height: 40px; line-height: 40px; background-color: slategrey; font-size: 16px; color: sandybrown; position: relative; } .demo2::before,.demo2::after{ position: absolute; content: ""; width: 20px; height: 2px; top: 50%; right: -30px; background-color: sandybrown; } .demo2::before{ left: -30px; } /* 文字下面加横线 */ .demo3{ height: 30px; line-height: 30px; background-color: rgb(241, 244, 247); color: rgb(12, 238, 110); position: relative; } .demo3::after{ content: ""; position: absolute; width: 100%; height: 2px; background: rgb(5, 226, 101); bottom: -10px; left: 0; } /* 文字左右加图片 */ .demo4{ height: 30px; line-height: 30px; background-color: rgb(241, 244, 247); color: rgb(27, 12, 238); position: relative; } .demo4::before{ content: ""; width: 40px; height: 40px; position:absolute; vertical-align: middle; background: url('./heart.png') no-repeat center; background-size: 100% 100%; top: -5px; left: -50%; } .demo4::after{ content: ""; width: 40px; height: 40px; position:absolute; vertical-align: middle; background: url('./star.png') no-repeat center; background-size: 100% 100%; top: -5px; right: -50%; } /* 分隔符号 */ ul{ list-style: none; display: flex; } li{ margin: 0 10px; position: relative; } li:not(:last-child):after{ content: "|"; position: absolute; right: -15px; } </style> </head> <body> <div style="width: 100%;display: flex;justify-content: space-around;"> <div class="demo1"></div> <div class="demo2">文字左右加横线</div> <div class="demo3">文字下面加横线</div> <div class="demo4">文字左右加图片</div> <ul> <li>html</li> <li>css</li> <li>js</li> </ul> </div> </body> </html>