html - 这个 css 是怎么在 <li> 之前打勾的

标签 html css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 5 年前

我正在尝试自己制作这个待办事项 https://www.w3schools.com/howto/howto_js_todolist.asp

但是这段css代码:

/* Add a "checked" mark when clicked on */
ul li.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

在列表前打勾,怎么把勾打在列表前?

最佳答案

“检查”只是给定特定尺寸然后旋转的空框的边框。 ::before 伪元素位于内容的开头,宽度和高度形成一个矩形,边框在四个边中的两个边上放置线条,然后转换旋转它,使边框看起来像一张支票。有点迂回的做法。他们也可以只使用 `content: 'some checkbox char'``。

如果您更改 border-width 或转换内容,您就会明白我的意思。

关于html - 这个 css 是怎么在 <li> 之前打勾的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45239558/

上一篇:JavaScript - 动态加载的 CSS : CSS variable not visible for JS but gets evaluated from CSS

下一篇:javascript - jQuery 没有得到应用。 Javascript 工作正常

相关文章:

html - 如何在 Bootstrap 列中居中图像

html - 当屏幕尺寸发生变化时,如何将按钮位置固定在 div 的内部?

javascript - 如何在表单上执行 php 脚本后显示成功消息

css - 调整标签旁边的输入

javascript - 从 xcode 链接 css、javascript

html - 控制相邻DIV到IMG标签的高度

javascript - 如何访问foreach语句中的选择器?

html - 为什么应用 CSS 过滤器会阻止包含的链接?我可以解决这个问题吗?

css - Sass @extend 行为类似于 LESS 和 @import

javascript - 使用 jquery 获取指向的元素