CSS——伪元素&:before

css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。

一、概念：

1.定义

The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。

其实::after和::before被引入css中，最核心的目的，还是为了实现语义化。在我们实际开发时候经常有这样的经历，为了实现一些效果，在文档中创建了一些没有实际内容的节点，或者加入辅助样式的文本.

2.使用

::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。如：

<style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
  </style>
  <p>ello Worl</p>

显示为完整的Hello World。

::after和::before是虚拟元素，不会影响真正元素的所在文档的位置，对:first-child或者:last-child这种伪类选择不会造成影响。

3.操作

::after和::before是虚拟节点，而不是正在的节点，不在documont里面找到对应Node对象，在之前的例子中，我们执行下列js代码：

console.log( document.querySelector("ul").childNodes)；

得到的是一个只有3个节点的NodeList对象，而两个伪元素并不在对象中。因为::after和::before不是真正的节点，所以我们取不到他们，也不发设置点击等用户事件。::after和::before虽然是不能设置事件，但还会捕获用户事件，并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号，是因为他不是真的冒泡，更准确的说::after和::before帮所在元素去捕获去事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身。

document不能获取到::after和::before所对应的节点对象，但是可以通过css的接口获取其样式属性，如：

window.getComputedStyle(
    document.querySelector('li'), ':before'
)

返回是个CSSStyleDeclaration对象，可以获取当前的style值。

二、分享一些::after和::before使用的经验

1、&:before画圆

<template>
    <div>
         <div class="title">今日新增量</div >
    <div/>
<template>
<style>
title {
          position: relative;
          &:before {
          // top: 5px;
          // left: -15px;
          position: absolute;
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #fa6861;
          content: '';
          }
    }
<style/>

效果图：

2、&:before竖条

<template>
    <div>
         <div class="title">前面加个竖条</div >
    <div/>
<template>
<style>
 .title {
        position: relative;
        &:before {
          top: 25px;
          left: 80px;
          position: absolute;
          display: block;
          width: 6px;
          height: 30px;
          background: #4d99f9;
          content: '';
        }
    }
<style/>

效果图：

 

3、&:before插入图片

<template>
    <div>
         <div class="title">前面加个图片</div >
    <div/>
<template>
<style>
.title {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          left: 75px;
          top: 26px;
          height: 28px;
          width: 12px;
          background: url('~@/assets/images/second-title.png') no-repeat;
          background-size: 100% 100%;
        }
    }
<style/>

效果图：

4、渐变背景颜色

background: linear-gradient(to right, rgb(68, 222, 197), rgb(78, 188, 250));

效果图

5、阴影立体效果

 box-shadow: 0 6px 12px 0 rgba(121, 118, 118, 0.34);

效果图

6.实现一些标签对placeholder的支持

只有几个标签支持placeholder，而且如<input type='date' />虽然是input但是也不支持。使用::before可以让一部分标签也实现对placeholder属性的支持。

例子

7.实现文字图片居中对齐

优雅地实现张鑫旭老师的inline-box居中方法，使用一个高度为100%的::before将自身的对齐线移动到自己的中线，这样里面的所有内联元素都居中对齐了。

例子

8.清除浮动

这个很常用，bootstrap的clearfix类就是使用这个方法。

例子

9.使用pointer-events消除伪元素事件

之前提到过，伪元素::after和::before会替所在元素捕获用户事件，有时候这并非我们想要的，因为这样会影响被::after和::before覆盖的子节点或者兄弟节点捕获用户事件，使用pointer-events可以消除这种问题。

例子

所有例子的源码在GitHub - laden666666/css-before-and-after-test: 一个css中的::after和::before伪元素的例子演示

简单就分享这么多，总之使用伪元素的核心是更利于语义化，这是我们活用::after和::before的前提，否则就是胡乱使用了。总体可以分为四种用法：

1.用css创建装饰性元素

2.用css创建用于布局的元素，实现特殊布局的特殊需要

3.做显示图标的实现手段

4.配合attr显示属性值

 参考：

http://www.webhek.com/pseudo-element/

CSS 巧用 :before和:after - 野兽' - 博客园

::after - CSS: Cascading Style Sheets | MDN

转载于:https://www.cnblogs.com/laden666666/p/6089880.html

相关资源：CSS中的before和:after伪元素使用详解_cssafter资源-CSDN文库