奇妙的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到下方的元素。（設置這個屬性以防僞元素遮蓋主元素的鼠標事件）。