:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。
使用伪元素做一个按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图标</title> <style> .btn{ width: 100px; height: 50px; text-align: center; line-height: 50px; background-color: #000; color: #fff; position: relative; } .btn::after{ position: absolute; content: ''; width: 30px; height: 30px; background: #fff; top: 10px; right: -15px; border-radius: 50%; } </style> </head> <body> <div class="btn"> button </div> </body> </html>