野花--利用伪元素画线

有的时候我们可能希望的border线要小于元素本身,就无法使用border来画线,我们可以直接利用伪元素画细线

li {
  &::before {
    position: absolute;
    content: '';
    background: #665e57;
    top: -1px;
    left: 6px;
    width: 64px;
    height: 1px;
  }

直接content为空,利用height和width加background就可以实现线条的效果.

posted @ 2022-11-06 23:22 EricYJChung 阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 原生JS获取伪元素

· 野花--flex布局小技巧之让某个子元素靠右或靠左显示

· h5 1px 细线如何实现

· css 伪类实现渐变线条

· 使用css实现一个条纹边框

公告

昵称： EricYJChung
园龄： 2年11个月
粉丝： 2
关注： 6

+加关注

2025年3月

日

一

二

三

四

五

六

ericyjchung 从心出发,不论归期

野花--利用伪元素画线

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜