奇妙的CSS之旅：有用的伪元素

时间 2019-11-17

标签奇妙 css 之旅有用元素栏目 CSS 繁體版

原文原文链接

最近在用css写动画，发现了一些好玩的效果～决定之后把遇到的有趣特效记录下来，供本身回顾与你们参考～css

今天主要讲伪元素:before 和 :after的使用。html

1. 基本概念

“伪元素”，顾名思义。它建立了一个虚假的元素，并插入到目标元素内容以前或以后。css3

伪元素添加不会出如今 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。git

2. 基本语法

p:before {}

p:after {}复制代码

在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，所以若是使用了 display 或者 width 等属性时使得显示脱离了本来元素后，建议按照标准双写。github

属性contentbash

这两个伪类下特有的属性content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。动画

伪元素若是没有设置“content”属性，伪元素是无用的。能够设置content属性值为空，仅仅把他当作一个盒子。spa
content属性能够有如下几类值：code

插入样式orm

伪元素相对于主元素进行定位；
插入的元素在默认状况下是内联元素。所以，为了给插入的元素赋予高度，填充，边距等等，你一般必须显式地定义它是一个块级元素。

#element:before{
    content: "";
    display:block;
    width:200px;
    height:200px;
}复制代码

3.奇妙效果

知道了伪元素的概念和用法固然是为了使用它啦～

展开边框

飞入边框

悬浮方括号

4.代码解析

这里接给出一个边框展开的代码，其余道理都是相通的～想看其余的能够查看后面给的GitHub连接～

<style>
    .strech{
        position: relative;
        background-color: #FFF3E0;
        width: 100px;
        height: 100px;
        margin: 30px auto;
    }
    .strech:before{
        transform: scaleX(0);
    }
    .strech:after{
        transform: scaleY(0);
    }

    .strech:before,.strech:after{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        pointer-events: none;
    }
    .strech:hover::before{
        transform: scaleX(1);
        border-top: 1px solid #F0B27A;
        border-bottom: 1px solid #F0B27A;
    }
    .strech:hover::after{
        transform: scaleY(1);
        border-left: 1px solid #F0B27A;
        border-right: 1px solid #F0B27A;
    }
    .strech:hover::before,.strech:hover::after{
        transition: transform .2s linear;
    }
    </style>复制代码

<body>
<div class="strech"></div>
</body>复制代码

主要是伪元素结合transform实现效果；
由于伪元素默认是内联元素，因此要设置display:block，才可设置宽高；
point-events属性，这是针对鼠标事件的属性，预设值为 auto，若值为 none，则能够穿越该元素，点击或hover到下方的元素。（设置这个属性以防伪元素遮盖主元素的鼠标事件）。

GitHub连接：

github.com/dy21335/Pra…

参考连接：

blog.dimpurr.com/css-before-…/

www.w3cplus.com/css3/learni…