1. 啥是::after 和 ::before,要用来干啥呢?
emmmm,它是伪元素。。。
用来装饰当前元素;最重要的是实现语义化,如果要创建一些没有实际内容的节点,或者加入辅助样式的文本,那用它就对了。
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- before 和 after 必须有 content 属性(不然就没啥用)
- befor 在内容的前面,after在内容的后面
- before 和 after 创建一个元素,但是属于行内元素(这个很重要)
- 因为在 dom 里面看不见刚才创建的元素,所以我们称它为伪元素
- 伪元素和标签选择器一样,权重为 1
例:
<div>是</div>
div::before {
width: 200px; /*因为是行内元素,所以是无效设置*/
height: 200px;
background-color: red;
content: "我"; /*必须有的属性*/
}
div::after {
width: 20px;
height: 20px;
background-color: red;
content: "Gragon";
}
2. 可以用来清除浮动
经常用它来干啥呢?
- 清除浮动
div::after{
content: "";
display: block;
clear: both;
}
- 字体图标
<div></div>
div {
width: 249px;
height: 35px;
border: 1px solid #000;
position: relative;
}
div::after {
content: "";
position: absolute;
top: 6px;
right: 8px;
width: 15px;
height: 15px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.3s;
}
/* 鼠标经过div,里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
效果
(作为学习笔记)
发现大佬写的更好https://blog.csdn.net/qq_34579060/article/details/80510759