CSS学习----伪元素选择器（::before、::after
2020-11-05 本文已影响0人
扮猪老虎吃
伪元素选择器（::before || ::after）
作用
利用CSS创建新标签元素，不需要HTML标签，从而简化HTML结构
-
::before在元素内部的前面插入内容 -
::after在元素内部的后面插入内容
注意:
- before和after创建一个元素，但属于行内元素
- 新创建的元素在文档树中找不到，称为伪元素
- 语法： element::before {}
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
示例说明
<!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>
div {
width: 200px;
height: 100px;
background-color: pink;
}
div::before{
content: '我';
display: block;
width: 20px;
height: 50px;
}
div::after{
content: '小猪佩奇'
}
</style>
</head>
<body>
<div>是</div>
</body>
</html>
效果
效果图
