使用CSS3的伪元素进行首字母下沉和首行改变样式
网页中常见的一种效果，首字改变样式或者首行改变样式，效果如下图。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo1 {
width: 300px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
/* 首字母改变样式 */
.demo1 p::first-letter {
color: red;
font-size: 40px;
font-weight: bold;
float: left;
}
.demo2 {
width: 300px;
height: 200px;
border: 1px solid #000;
overflow: auto;
margin-top: 200px;
}
.demo2::first-line {
color:salmon;
}
</style>
</head>
<body>
<div class="demo1">
<p>
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
</p>
</div>
<div class="demo2">
<p>
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
我是内容，测试内容，内容我是内容，测试内容，内容我是内容，测试内容，内容
</p>
</div>
</body>
</html>
