首页 > 其他分享 >野花--利用伪元素画线

野花--利用伪元素画线

时间:2022-11-06 23:35:30浏览次数:32  
标签:-- 元素 画线 height content width 野花 border

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

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

 

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

标签:--,元素,画线,height,content,width,野花,border
From: https://www.cnblogs.com/ericyjchung/p/16864624.html

相关文章

  • java--Stream流基础
    Stream流操作方法执行完此方法之后,Stream流依然可以继续执行其他操作Stream流的思想 Stream流的三类方法  获取Stream流    好比创建一条流水线,并把数据放......
  • vue $nextTick方法
    $nextTick方法问题:异步代码没有执行,但是同步代码已经完成逻辑,所以就需要使用$nextTick来等待dom完毕后再执行同步代码解决方法:使用nextTick()等待dom更新完毕后,在......
  • .net core在centos上使用libgdiplus库图像处理
    #Seehttps://aka.ms/containerfastmodetounderstandhowVisualStudiousesthisDockerfiletobuildyourimagesforfasterdebugging.FROMmcr.microsoft.com/......
  • Servlet生命周期
    1.执行Servlet构造方法2.执行init初始化方法第一、二步是在第一次访问的时候创建Servlet程序会调用3.执行service方法第三步每次访问都会调用4.执行destroy销毁方法......
  • 学习python-Day83
    昨日回顾1.vue项目目录----》vue项目编译----》html,css,jspublic:index.html 单页面应用src:以后写代码,都在这里assetscomponentrouterstore:vuex----》状态管......
  • 论文笔记 - Coresets for Data-efficient Training of Machine Learning Models
    Motivation训练深度网络存在的问题:需要大量训练数据,进而需要更强的计算资源等。因此如何在减少这些开销(例如使用更小的数据集)的同时,不影响模型的性能成为了一个至关重要......
  • 实验7:基于REST API的SDN北向应用实践
    实验7:基于RESTAPI的SDN北向应用实践一、实验目的能够编写程序调用OpenDaylightRESTAPI实现特定网络功能;能够编写程序调用RyuRESTAPI实现特定网络功能。二、实验......
  • 学习python-Day84
    今日学习内容补充:关于环境变量的问题1.相对导入和绝对导入1.相对导入必须从环境变量下开始到sys.path 如果包找不到错误,确认环境变量。2.绝对导入,以当前文件为基准......
  • 逆向工程-代码生成器
    packagecom.atguigu.demo;importcom.baomidou.mybatisplus.annotation.DbType;importcom.baomidou.mybatisplus.annotation.IdType;importcom.baomidou.mybatisplus.ge......
  • java 集合
    packagecom.tedu.day1302;importjava.util.ArrayList;importjava.util.Collection;publicclassStudy_Collection{publicstaticvoidmain(String[]args)......