<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<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: yellow;
}
p::selection{
background-color: greenyellow;
}
/* div::before{
content: 'abd';
color: red;
}
div::after{
content: 'haha';
color: blue;
} */
div::before{
content: '【';
}
div::after{
content: '】';
}
</style>
</head>
<body>
<q>hello</q>
<div>Hello Hello How are you</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil esse aspernatur, illo et eveniet vitae veritatis quas eum omnis molestias distinctio nulla. Impedit amet laudantium distinctio nam maiores ipsum architecto?
</p>
</body>
</html>
020-伪元素选择器
最新推荐文章于 2023-04-30 12:11:03 发布