伪元素before,after的简单了解
1.before,after简介
两者都是以display:inline-block(横向块级排列)的属性存在,::before是在原本的元素之前加入内容,::after则是在原本的元素之后加入内容,同时伪元素也会继承原来元素的属性,就像如果原来文字是黑色,伪元素的文字也会是黑色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div::before{
content: "一段文字";
}
</style>
</head>
<body>
<div style="color: #55FFFF;">
</div>
</body>
</html>
2.content属性
content属性中可以写一些东西,像文字,符号,当然也可以不写。
1)文字
如简介中的例子。
2)符号
<div>
<q>我是一段文字我是一段文字我是一段文字</q>
</div>
div::before{
width: 200px;
height: 200px;
background-color: #87CEEB;
content: open-quote;
}
div::after{
content: close-quote;
}
q{
quotes: '<''>';
}
3.与hover结合
与hover结合后也会出现一些比较好看的效果。
.one{
width: 500px;
height: 200px;
background-color: #7FFFD4;
margin: 0 auto;
}
.one::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: .3s;
background: #ffffff;
transform-origin: left;
transform: scaleX(0);
}
.one:hover::after {
transform: scaleX(1);
}
当鼠标移动上去时就会div就会出现。
可以用transition来控制出现的速度。