换个思路：CSS实现一个对号

最新推荐文章于 2024-08-19 11:56:40 发布

水荷

最新推荐文章于 2024-08-19 11:56:40 发布

阅读量3k

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/shuiseyangguang/article/details/83934341

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一直以来对号的引用都是用图标库，换个思路来实现一下，CSS的伪类还是很强大的。

<span class="check" />

.check{
	position: relative;
    display: inline-block;
   	width: 16px;
    height: 15px;
    margin: 0 10px;
}
.check::after{
	content: "";
	position: absolute;
	left:0;
	width: 100%;
 	height: 50%;
	border: 2px solid #000;
	border-radius: 1px;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(-45deg);
}

效果图：
在这里插入图片描述