css制作的打勾（√）小图标和可输入的div、span

最新推荐文章于 2024-01-17 06:33:43 发布

饺子进水啦

最新推荐文章于 2024-01-17 06:33:43 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/weixin_36674210/article/details/104745816

版权

本文探讨了如何使用CSS为HTML中的span和div元素添加下划线，以及如何创建绿色和灰色的打钩图标。通过具体的代码示例，展示了如何设置元素的样式，包括边框半径、背景颜色和图标的具体形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可输入span、div

span div {
	text-decoration: underline;
}
span:before, span:before {
	content: '  ';
	white-space: pre;
}
span:after,div:after {
	content: '  ';
	white-space: pre;
}
<span contenteditable="true">
   我是王
</span>
<div contenteditable="true">
   我是王
</div>

打钩图标

/**绿色勾*/
.greenicon-tick-checked {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #2ac845;
    line-height: 25px;
    cursor: pointer;
}
/**灰色勾*/
.grayicon-tick-uncheck {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #5f646e;
    cursor: pointer;
}
.greenicon-tick-checked:before, .greenicon-tick-checked:after,
.grayicon-tick-uncheck:before, .grayicon-tick-uncheck:after {
    content: '';
    pointer-events: none;
    position: absolute;
    color: white;
    border: 1px solid;
    background-color: white;
}
.greenicon-tick-checked:before,
.grayicon-tick-uncheck:before {
    width: 1px;
    height: 1px;
    left: 25%;
    top: 50%;
    transform: skew(0deg,50deg);
}
.greenicon-tick-checked:after,
.grayicon-tick-uncheck:after {
    width: 3px;
    height: 1px;
    left: 45%;
    top: 42%;
    transform: skew(0deg,-50deg);
}
<ol>
    <li><span>我是王</span><span class="greenicon-tick-checked"></span></li>
    <li><span>我是王</span><span class="greenicon-tick-checked"></span></li>
    <li><span>我是王</span><span class="greenicon-tick-checked"></span></li>
    <li><span>我是王</span><span class="grayicon-tick-uncheck"></span></li>
</ol>