伪元素初解

一、伪元素与伪类

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;
    }
    
    <!--html-->
    
    <p class="p1">我是一个p1</p>
    <p class="p2">
        <span>我是一个:before</span>我是一个p2<span>我是一个:after</span>
    </p>
  

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;
    }
    
    <!--html部分-->
    
    <div class="head"></div>