介绍常用的伪元素。
after用得比较多的
用于为文本的第一个首字母设置样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } </style> </head> <body> <div> <p>我是一个段落</p> </div> </body> </html>
用于在元素的内容前面插入新内容
使用此伪元素选择器一定要结合content属性
在每个<p>元素之前插入内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 用于在元素的内容前面插入新内容*/ p:before{ content: ‘mike‘; color: red; font-size: 30px; } </style> </head> <body> <div> <p>我是一个段落</p> </div> </body> </html>
用在网页布局比较多，清除浮动
用于在元素的内容后面插入新内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 用于在元素的内容后面插入新内容*/ p:after{ content: ‘&‘; color: red; font-size: 30px; } </style> </head> <body> <div> <p>我是一个段落</p> </div> </body> </html>
在每个<p>元素之后插入内容
原文：https://www.cnblogs.com/mingerlcm/p/10803042.html