<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
/*
伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
*/
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: darksalmon;
}
p::selection{
background-color: darkseagreen;
}
div::before{
content: '『';
color:deeppink;
}
div::after{
content:'』';
color:deeppink;
}
</style>
</head>
<body>
<div>hello</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora modi consequuntur voluptatum nihil aperiam obcaecati similique, a culpa repellat doloremque, temporibus architecto? Delectus, totam error! Nam necessitatibus voluptate rem provident.</p>
</body>
</html>
css--伪元素选择器
最新推荐文章于 2024-04-16 12:23:43 发布