习惯于用伪元素可以让页面更加整洁，能少去很多累赘般的HTML标签。下面来说说伪元素比较常见的几个用法。
1.画对话框的小箭头
image.png
.copyed {
position: absolute;
bottom: 70px;
right: -10px;
height: 40px;
line-height: 40px;
width: 60px;
background-color: #fff;
border-radius: 5px;
text-align: center;
border: 1px solid #a6b5c1;
}
.copyed::after {
content: "";
display: block;
height: 14px;
width: 14px;
border: 1px solid #a6b5c1;
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(45deg);
position: absolute;
top: 12px;
left: -7px;
z-index: 2;
background-color: #fff;
}
2.画分割线
image.png
<style>
p{
width: 14vw;
height: 21px;
margin: 100px auto;
text-align: center;
position: relative;
}
p::before,p::after{
content: "";
display: block;
position: absolute;
top: 10px;
width: 43vw;
height: 1px;
background-color: #ccc;
}
p::before{
right: 14vw;
}
p::after{
left: 14vw;
}
</style>
<body>
<p>利用伪元素实现单标签分割线</p>
</body>
3.常见图形按钮（平行四边形，等腰梯形）
image.png
<style>
button{
height: 40px;
width: 80px;
background-color: transparent;
color: #fff;
border: 0;
margin: 10px auto;
display: block;
position: relative;
}
button::after{
content: "";
display: block;
background-color: #357aed;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
button:first-child::after{
transform: skew(45deg);
}
button:last-child::after{
transform: perspective(10px) rotateX(5deg) scale(1.5);
transform-origin: bottom;
}
</style>
<body>
<button>平行四边形</button>
<button>等腰梯形</button>
</body>
4.计数
count.png
<style>
.choose{
/*此值是必需的。必须用于选择器，主要用来标识该作用域，
其值可以自定义，默认值为0。
name （number）,名称 起始值；*/
counter-reset: subject;
}
.choose input:checked{
/*用来标识计数器与实际关联的范围，默认递增为1。
name （number），名称 递增值；*/
counter-increment: subject;
}
.count:before{
/*生成内容，name，style，名称 样式:
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
inherit
*/
content: counter(subject);
}
</style>
<body>
<div class="choose">
<label><input type="checkbox">语文</label>
<label><input type="checkbox">数学</label>
<label><input type="checkbox">英语</label>
<label><input type="checkbox">化学</label>
<label><input type="checkbox">物理</label>
</div>
<p>你选择了<span class="count"></span>门课程</p>
</body>
网友评论