网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css

css before文字下划线怎么实现?

2021/8/4 21:12:00

css里的 before是什么? ::before和::after是伪元素,(css3中为了与伪类做区别,伪元素采用双冒号的写法;但因为兼容性的问题,所以现在大部分还是统一的单冒号,比如:first-line、:first-letter、:before、:after等,但新的在CSS3中引入的伪元素就不允许用单冒号的…

css里的 before是什么?

     ::before和::after是伪元素,(css3中为了与伪类做区别,伪元素采用双冒号的写法;但因为兼容性的问题,所以现在大部分还是统一的单冒号,比如:first-line、:first-letter、:before、:after等,但新的在CSS3中引入的伪元素就不允许用单冒号的写法。)

      “:before” 伪元素可以在元素的内容前面插入新内容。

      “:after” 伪元素可以在元素的内容之后插入新内容。

      ::before或::after都必须和content属性结合使用,content不能没有,内容至少为空;伪元素的display默认为inline,可以自己改。

css before文字下划线怎么实现?


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document-www.woaidaogu.com</title>
<style>
    * {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
  border-bottom: 1px solid black;
      width: 200px;
      margin: -1px;
    }
  </style>
</head>
<body>
  <p>分割线</p>
</body>
</html>

        通过以上内容我们知道了css before实现文字下划线的方法,不知道大家有什么更优的方案吗,如果有的话,记得分享给我哦,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01