伪元素初解

一、伪元素与伪类

1. 常见的伪类

:active      
:hover       
:link        
:visited     
etc.

2. 伪元素

::before       
::after        
::first-letter 
::first-line   
::selection    

---

二、伪元素（这里只说::before和::after）

1. 了解

• 创建一个虚假元素插入到元素的前或者后
• 它不在文档流中，无法使用正常的DOM操作；
• 它可以用css去操控
• 在技术上来说，与添加一个span标签等价
• :before/:after写法也可以被浏览器解析，但是为了区别于伪类，还是建议用两个冒号书写
• 注意：因为其很难使用DOM操作，所以需要交互的部分不要使用伪元素去生成

2. ::before/::after基本语法

• css样式中必须加入content属性

• content属性以表示该伪元素中的内容；若无内容则用空字符串表示

    .p1::before{
        content: "我是一个:before";
    }
    .p1::after{
        content: "我是一个:after";
    }
  

3. 效果分析

• 可以看到伪元素效果在技术上与span等价

• 伪元素在浏览器检解析中的位置是在父元素内容的前后
  

  
  
  
  
  
  

    *{
        margin: 0;
        padding: 0;
    }
    .p1::before{
        content: "我是一个:before";
        background-color: skyblue;
    }
    .p1::after{
        content: "我是一个:after";
        background-color: skyblue;
    }
    span{
        background-color: skyblue;
    }
    p{
        width: 400px;
        background-color: pink;
        text-align: center;
    }
    
    
    
    
  我是一个p1
    
  
        我是一个:before我是一个p2我是一个:after
    
  

4. 再来个例子

• 伪元素常配合定位来生成父级的某些附加部分，如下图米奇的耳朵

  
  
  
  
  

    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        border: 2px solid black;
        border-radius: 50%;
        position: relative;
        left: 200px;
        top: 200px;
    }
    div::before{
        content: "";
        width: 40px;
        height: 40px;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        left: -14px;
        top: -24px;
    }
    div::after{
        content: "";
        width: 40px;
        height: 40px;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        left: 74px;
        top: -24px;
    }