01伪元素选择器.html
<!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>Document</title> <style> /* 选择第一个字*/ p::first-letter { color: red; font-size: 40px; } /* 选择第一行*/ p::first-line { color: blue; } /*选中文字的时候 只能是字体颜色和背景色样式可以设置*/ p::selection { color: pink; font-size: 42px; background-color: brown; } </style> </head> <body> <p> freestyle，英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月，因吴亦凡在国产说唱综艺《中国有嘻哈》中屡次提起freestyle而火遍网络。 2017年12月18日，“你有freestyle吗？”入选国家语言资源监测与研究中心发布的2017年度十大网络用语”。 </p> </body> </html>
02伪元素选择器2.html
<!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>Document</title> <style> /*before和after表示在盒子内部前面插入或内部后面插入*/ div::before { content: "俺"; } div::after { content: "30出头"; } </style> </head> <body> <div>今年</div> </body> </html>