<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
/*
伪元素，表示页面中一些特殊的并不真实存在的元素 (特殊的位置)
*/
p{
color: blue;
}
/*
第一个字母
*/
p::first-letter{
font-size: 40px;
}
/* 第一行 */
p::first-line{
background-color:yellowgreen;
}
/* 选中的内容 */
p::selection{
color: red;
}
/* ::before 元素的开始
::after 元素的结束
这两个 必须结合content属性来使用 因为正常来说
之前和之后是没有内容的，那么自然也就没有效果显示出来
*/
div::before{
content: '【';
color: rgb(7, 13, 102);
}
div::after{
content: '】';
color: rgb(7, 13, 102);
}
</style>
</head>
<body>
<div>这是div 可以用来看before 和after属性的效果</div>
<p>这里是段落
<br>莫欺少年穷，终需有日龙穿凤
</p>
</body>
</html>
投递海康威视等公司10个岗位 >
京东工作强度 208人发布