before和after选择器

简介: before和after选择器

在科学上没有平坦的大道,只有不畏劳苦,沿着陡峭山路攀登的人,才有希望达到光辉的顶点——马克思

我们可以使用::before::after去选择我们节点内部的首项或尾项

例如我这里代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .ruben-parent {
        width: 100%;
        border: 0.1em solid #ababab;
        text-align: center;
      }
      .ruben-parent::before,
      .ruben-parent::after {
        margin: 0 auto;
        content: '';
        display: block;
        width: 1em;
        height: 0.1em;
        background: #76838f;
        transition: 0.5s;
      }
      .ruben-parent:hover::before,
      .ruben-parent:hover::after {
        width: 100%;
        height: 1em;
      }
    </style>
  </head>
  <body>
    <div class="ruben-parent">
      <span>ruben</span>
    </div>
  </body>
</html>

页面渲染后节点如下,多了一个::before和一个::after

我们使用display: block;将它设为块级元素后,并使用content: '';给它一个空的内容

然后我们再给它宽度、高度、颜色等等样式

最后再加上hover事件

实现的效果如下

相关文章
|
7月前
|
前端开发 开发者
类选择器和伪类选择器有何不同
类选择器和伪类选择器有何不同【2月更文挑战第26天】
67 10
|
3月前
选择器
选择器。
34 2
|
3月前
选择器(2)
选择器(2)。
45 2
|
3月前
after选择器
after选择器。
30 1
|
3月前
before选择器
before选择器。
50 1
|
3月前
子代选择器和兄弟选择器
子代选择器和兄弟选择器。
30 2
|
JavaScript
jQuery选择器之基本选择器(简单)及层次选择器(重要)
jQuery选择器之基本选择器(简单)及层次选择器(重要)
210 37
|
前端开发 JavaScript
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
有关基础选择器的学习记录,包括标签选择器、类选择器、id选择器和通配符选择器...
400 0
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
html+css实战67-02选择器-子代选择器
html+css实战67-02选择器-子代选择器
145 0
html+css实战67-02选择器-子代选择器