CSS 小知识点之伪元素的应用

快来打我* 2022-09-14 13:22 30阅读 0赞

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过`::before`来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

CSS3规范中的要求使用双冒号`(::)`表示伪元素，以此来区分伪元素和伪类，比如`::before`和`::after`等伪元素使用双冒号`(::)`

#### 清除浮动 ####

![在这里插入图片描述][d68c9604db564da8a34585c0ba59ee50.gif_pic_center]

.news { 
      background-color: gray;
      border: solid 1px black;
    }
    
    .news img { 
      float: left;
    }
    
    .news p { 
      float: right;
    }
    
    .clear::after { 
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

#### 分割线 ####

![在这里插入图片描述][03d480d1de80459489a711f3086359cb.png]

.line::before, .line::after { 
      content: '';
      display: inline-block;
      border-top: 1px solid #ddd;
      width: 200px;
      margin: 5px;
    }

#### 计数器 ####

![在这里插入图片描述][1a43feac92174a4f9cb6cac1f38dda93.gif_pic_center]

.chooses { 
      counter-reset: letters;
    }
    
    .chooses input:checked { 
      counter-increment: letters;
    }
    
    .choose span::after { 
      content: counter(letters);
    }

#### 冒泡三角形 ####

![在这里插入图片描述][e07d1015f1a6409db0758eed7d1bcb4f.png]

.tooltip { 
      position: relative;
      padding: 10px;
      border-radius: 3px;
      background: #fff;
      border: 1px solid #000;
      display: inline-block;
    }
    
    .tooltip .caret, ::before { 
      width: 10px;
      height: 10px;
      border-left: 1px solid #000;
      border-top: 1px solid #000;
      background: #fff;
      display: inline-block;
      transform: rotateZ(45deg);
      position: absolute;
      top: -7px;
    }

<div class="tooltip">
      <span class="caret"></span>
      Hello World
    </div>

#### 指标牌 ####

![在这里插入图片描述][de5ff30c939643d1b86dea73b743d334.png]

.tag { 
      width: 100px;
      background: #EF001E;
      height: 32px;
      position: relative;
      border: 1px solid transparent;
    }
    
    .tag::before { 
      content: '';
      position: absolute;
      left: -4px;
      top: 50%;
      transform: translate(0, -50%);
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 12px solid #fff;
    }
    
    .tag::after { 
      content: '';
      position: absolute;
      right: -9px;
      top: 50%;
      transform: translate(0, -50%);
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
      border-left: 8px solid #EF001E;
    }

[d68c9604db564da8a34585c0ba59ee50.gif_pic_center]: /images/20220828/e27b2c42aa7a4153a9d7a878c4e80b6d.png
[03d480d1de80459489a711f3086359cb.png]: /images/20220828/48f455fc2d544f1f9a323bd17ec8629f.png
[1a43feac92174a4f9cb6cac1f38dda93.gif_pic_center]: /images/20220828/bae92bffc6f94c3497952b1b4ed65565.png
[e07d1015f1a6409db0758eed7d1bcb4f.png]: /images/20220828/6535063988934b71b9dc49f066edb5a3.png
[de5ff30c939643d1b86dea73b743d334.png]: /images/20220828/1f39769430454cd391fe8815f45a3a33.png