.css选择器之伪元素选择器

:first-line伪元素用于向文本的首行设置特殊样式,只能用于块级元素

:first-letter伪元素用于向文本的首字母设置特殊样式

:before在元素的内容前面插入新的内容

:after在元素的内容后面插入新的内容

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>css选择器之伪元素选择器</title>
 8 <style type="text/css">
 9 p:first-letter{
10 font-size: 100%;
11 }
12 p:after{
13 content:'';/*这个属性不能省略,如果省略,该属性不起作用*/
14 width:20px;
15 height: 20px;
16 background-color: #000000
17 }
18 </style>
19 </head>
20 <body>
21 <p>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
22 </body>
23 </html>