前端的学习之路：初级CSS---伪元素
程序员文章站
2022-05-10 11:02:37
...
伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.15.09.css"> -->
<style>
p {
font-size: 20px;
}
/*
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容（鼠标选中）
::before 元素的开始
::after 元素的最后
-before和after必须结合content属性来使用
*/
p::first-letter {
font-size: 50px;
}
p::first-line {
background-color: orange;
}
p::selection {
background-color: royalblue;
}
div::before {
content: 'abc';
color: blue;
}
div::after {
content: 'haha';
color: blueviolet;
}
</style>
</head>
<body>
<div>hello li jian bin</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim reiciendis impedit repudiandae fugiat inventore,
suscipit ab reprehenderit magni mollitia architecto dolorum necessitatibus non quasi nisi quas optio quisquam
incidunt velit!</p>
</body>
</html>
运行结果为：