伪类元素的用法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪元素</title>
</head>
<body>
<style>
.trangle {
content: " ";
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #333;
}
</style>
<h3>三角形下拉箭头</h3>
<div class="trangle"></div>
<style>
.dialog {
position: relative;
width: 150px;
height: 36px;
border: black 1px solid;
border-radius: 5px;
background: rgba(245, 245, 245, 1)
}
.dialog:before, .dialog:after {
content: "";
position: absolute;
top: 8px;
width: 0;
height: 0;
border: 6px transparent solid;
}
.dialog:before {
left: -12px;
border-right-color: rgba(0, 0, 0, 1);
}
.dialog:after {
left: -11px;
border-right-color: rgba(245, 245, 245, 1);
}
</style>
<h3>对话框的三角形</h3>
<div class="dialog"></div>
<style>
.mask-box {
width: 300px;
height: 200px;
margin-top: 20px;
padding: 20px;
background: url(http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJ1fJWJyIQQ3LAAZwxw7cwswAAU-KQJ6sCQABnDf642.jpg) #FB5E23;
}
.mask-box .mask {
position: relative;
width: 100%;
height: 100%;
}
.mask-box .mask:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .5);
}
.mask-box .mask span {
display: block;
position: inherit;
z-index: 1;
padding-top: 90px;
text-align: center;
font-weight: 900;
}
</style>
<h3>遮罩层</h3>
<div class="mask-box">
<div class="mask">
<span>遮罩层效果</span>
</div>
</div>
<style>
.effect {
position: relative;
display: inline-block;
margin-left: 30px;
padding: 10px;
font-size: 30px;
}
.effect:hover::before, .effect:hover::after {
position: absolute;
}
.effect:hover::before {
content: "\5B";
left: -20px;
}
.effect:hover::after {
content: "\5D";
right: -20px;
}
</style>
<h3>符号-动态效果</h3>
<div class="effect">鼠标悬停看效果</div>
</body>
</html>
