1.定義

偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式姨蝴。比如說俊啼，我們可以通過:before :after來在一個元素前、后增加一些文本左医，并為這些文本添加樣式授帕。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中浮梢。

2.偽元素的單雙冒號

在CSS2之前規(guī)范不明確的時跛十，偽元素使用單冒號(:)來表示；

在CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素秕硝，以此來區(qū)分偽元素和偽類芥映；但為了向上兼容，現(xiàn)在用單冒號（:）也可以的远豺。

3. 使用場景

下面運用before和after在元素前面和后面插入偽元素奈偏，實現(xiàn)一些有意思的小效果，代碼和效果圖附上躯护。

3.1用偽元素實現(xiàn)插入文字惊来、字體圖標庫

3.1.1插入文字：

h1:before {
 content:"你好";  /* 在標題前面插入文字 并設(shè)置樣式 */ 
 color: pink;
 font-size: 20px;
 width: 40px;
 height: 40px;  
}

<h1>我是標題</h1>

效果如下：

image

3.1.2插入iconfont字體圖標庫：

@font-face {
    font-family: 'iconfont';
    src: url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot');
    src: url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot?#iefix') format('embedded-opentype'),
        url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff2') format('woff2'),
        url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff') format('woff'),
        url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.ttf') format('truetype'),
        url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.svg#iconfont') format('svg');
}

h1:before {
    font-family: "iconfont" !important;
    /* 一定要加 */
    content: "\e601";
    color: pink;
    font-size: 20px;
    width: 40px;
    height: 40px;
}

<h1>我是標題</h1>

根據(jù)效果圖可以看到偽元素是inline元素類型

image

3.2清除浮動

解決浮動導致的父元素高度塌陷的問題

.clear:after {
     content: "";
     display: block;
     clear: both;
 }
 ul{
     background:pink;
 }
 li{
     float:left;
     margin:0 20px;
}
 <ul class="clear">
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
 </ul>

3.3分割線效果

p:before{
    content:'';
    display:inline-block;
    width:100px;
    height:2px;
    background:pink;
    margin:5px;
 }
 p:after{
    content:'';
    display:inline-block;
    width:100px;
    height:2px;
    background:pink;
    margin:5px;
 }

<p>分割線</p>

效果圖：

3.4對話框效果

div {
    width: 180px;
    height: 36px;
    line-height: 36px;
    background: #c0eeff;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    position: relative;
}

div:before {
    content: "";
    position: absolute;
    top: 10px;
    left: -14px;
    /* 畫三角形 */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #c0eeff;
    border-bottom: 10px solid transparent;
    border-left: 0 solid #c0eeff;

}

<div>快來和我聊天吧~</div>

效果圖如下：

3.5 相片層疊效果

div {
    width: 400px;
    height: 300px;
    border: 8px solid #eee;
    position: relative;
}

div img {
    width: 100%;
    height: 100%;
}

div:before,
div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 400px;
    height: 300px;
    border: 8px solid #eee;
    transform: rotate(8deg);
}

div:after {
    transform: rotate(-8deg);
}

<div>
    <img src="https://gitee.com/ay8yt/imageStore/raw/master/%E4%BA%8C%E9%98%B6%E6%AE%B5%E5%A4%A7%E7%BA%B2/%E5%9B%BE%E7%89%87/QQ%E6%88%AA%E5%9B%BE20200417104911.png">
</div>

效果圖如下：

總結(jié)

使用偽元素能實現(xiàn)的效果非常多，也可以減少網(wǎng)頁中標簽的使用，一起動手試試看偽元素的妙用技巧吧。