css:befor :after 偽元素的妙用

1.介紹

CSS中的:befor、:after都會創建一個偽元素，其中:befor創建的偽元素是所選元素的第一個子元素，:after創建的偽元素是所選元素的最后一個子元素。

:befor、:after創建的偽元素默認樣式為內聯樣式。

2.語法

/* CSS3 */
selector::before
 
/* CSS2 */
selector:before

CSS3引入了 ::（兩個冒號）是用來區分偽類(:一個冒號)和偽元素(::兩個冒號)。

偽類：操作元素本身，如 :hover、:first-child、:focus等等。

偽元素：操作元素的子元素，如 ::before、::after、::content等等。

在IE8中只支持:(一個冒號)，所以為了兼容這些瀏覽器也可以使用 :befor、:after。

3.content屬性

content 屬性表示偽元素填充的內容。

示例：

html:

<div class="test-div">"hello"</div>

css:

.test-div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
 
.test-div::before {
    content: "♥";
    color: red;
}
 
.test-div::after {
    content: "♥";
    color: blue;
}

效果：

 4.可替換元素

可替換元素（replaced element）：其展現不由CSS來控制的。這些元素是一類外觀渲染獨立於CSS的對象。

典型的可替換元素有<iframe>、<img>、 <object>、 <video> 以及 表單元素，如<textarea>、 <input> 。

某些元素只在一些特殊情況下表現為可替換元素，例如 <audio> 和 <canvas> 。

:befor :after 在此類元素內是不生效的。

5.瀏覽器支持情況

IE9版本才開始完全支持 :befor :after ，Chrome、Firefox現都已全線支持。

IE	Edge	Firefox	Chrome	Android Chrome	Ios Safari
9	all	2	all	all	all

 

 

 

6.應用場景

1）支持文本字符

html:

<span class="book">JavaScript 權威指南</span>
<br>
<span class="book">JavaScript 高級程序設計</span>

css:

.book::before {
    content: "《";
    color: red;
}

.book::after {
    content: "》";
    color: blue;
}

效果：

  2）支持iconfont

說明：content屬性也支持iconfont字體圖表的展示。這也是使用最多的場景。

示例：此示例已引用了阿里iconfont圖標庫

html:

<link rel="stylesheet" href="//at.alicdn.com/t/font_535317_4pkadolrurdrhpvi.css">
<span class="wechat">微信</span>

css:

.wechat::before {
    content: "\e85b";
    font-family: "iconfont";
    font-size: 15px;
    font-style: normal;
    color: #44b549;
}

效果：

 3.1）進度線

說明：:befor :after創建的偽元素可以以線條方式定位在元素周邊的指定位置上，如進度線和時間線。

html:

<div class="progress-line-wrapper">
    <div class="item active">
        <span class="title">填寫身份信息</span>
        <span class="step">1</span>
    </div>
    <div class="item">
        <span class="title">補充用戶資料</span>
        <span class="step">2</span>
    </div>
    <div class="item">
        <span class="title">完成注冊</span>
        <span class="step">3</span>
    </div>
</div>

css:

.progress-line-wrapper .item {
 width: 120px;
 float: left;
 text-align: center;
 font-size: 14px;
}

.progress-line-wrapper .item .title {
 display: block;
 color: #d5d5d5;
}

.progress-line-wrapper .item .step {
 width: 20px;
 height: 20px;
 display: inline-block;
 position: relative;
 background-color: #d5d5d5;
 color: #fff;
 border-radius: 50%;
 text-align: center;
}

.progress-line-wrapper .item .step::before,
.progress-line-wrapper .item .step::after {
 content: '';
 width: 50px;
 height: 4px;
 background-color: #d5d5d5;
 position: absolute;
 top: 8px;
}

.progress-line-wrapper .item .step::before {
 right: 20px;
}

.progress-line-wrapper .item .step::after {
 left: 20px;
}

/* 激活時樣式 */
.progress-line-wrapper .item.active .title {
 color: #c12d1e;
}

.progress-line-wrapper .item.active .step {
 background-color: #c12d1e;
 color: #fff;
}

.progress-line-wrapper .item.active .step::before,
.progress-line-wrapper .item.active .step::after {
 background-color: #c12d1e;
}

效果：

 3.2)時間線

html：

<!-- 時間線 -->
<div class="time-line-wrapper">
    <div class="item avtive">
        <span class="title">配送完成</span>
        <span class="time">2018/02/02 18:10</span>
    </div>
    <div class="item">
        <span class="title">開始配送</span>
        <span class="time">2018/02/02 17:40</span>
    </div>
    <div class="item">
        <span class="title">接收訂單</span>
        <span class="time">2018/02/02 17:31</span>
    </div>
    <div class="item">
        <span class="title">提交訂單</span>
        <span class="time">2018/02/02 17:30</span>
    </div>
</div>

css:

/* 時間線 */

.time-line-wrapper .item {
    position: relative;
    padding-top: 50px;
    margin-left: 20px;
}

.time-line-wrapper .item::before {
    width: 15px;
    height: 15px;
    content: '';
    background-color: #d5d5d5;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    left: -20px;
    z-index: 1001;
}

.time-line-wrapper .item::after {
    width: 5px;
    height: 90%;
    content: '';
    background-color: #d5d5d5;
    position: absolute;
    bottom: 15px;
    left: -15px;
    z-index: 1000;
}

/* 時間線的第一個節點，表示目前的狀態 */
.time-line-wrapper .item:first-child {
    padding-top: 0px;
}

.time-line-wrapper .item:first-child::before {
    background-color: #3fa6c5;
}

.time-line-wrapper .item:first-child:after {
    display: none;
}

效果：

4）幾何圖形

說明：通過設置 :befor :after 偽元素的border相關屬性，可創建非常多的幾何圖形；如三角形、多邊形、五角星等等。

4.1）矩形

說明：默認情況下，:befor :after 偽元素的border邊框屬性與其他HTML元素一樣。

css:

div::before {
    width: 0px;
    height: 0px;
    content: '';
    position: absolute;
    border-top: 50px solid #f50000;
    border-right: 50px solid #6cc361;
    border-bottom: 50px solid #6167c3;
    border-left: 50px solid #fa00d9;
}

效果：

 

 4.2）三角形

說明：顯示某一方位的border，並隱藏左右2邊的border(背景設置為透明)，可讓偽元素顯示三角形的形狀。

html:

<!-- 三角形 -->
<div class="triangle top"></div>
<div class="triangle right"></div>
<div class="triangle bottom"></div>
<div class="triangle left"></div>

css:

.triangle {
    width: 0px;
    height: 0px;
    display: inline-block;
    margin-right: 100px;
    position: relative;
}

.triangle::before {
    width: 0px;
    height: 0px;
    content: '';
    position: absolute;
}

.triangle.top::before {
    border-top: 0px;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #f50000;
    border-left: 30px solid transparent;
}

.triangle.right::before {
    border-top: 30px solid transparent;
    border-right: 0px;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #f50000;
}

.triangle.bottom::before {
    border-top: 30px solid #f50000;
    border-right: 30px solid transparent;
    border-bottom: 0px;
    border-left: 30px solid transparent;
}

.triangle.left::before {
    border-top: 30px solid transparent;
    border-right: 30px solid #f50000;
    border-bottom: 30px solid transparent;
    border-left: 0px;
}

效果：

 

 7.擴展閱讀

MDN ::before：https://developer.mozilla.org/en-US/docs/Web/CSS/::before

MDN ::after：https://developer.mozilla.org/en-US/docs/Web/CSS/::after

::before、::after介紹：https://css-tricks.com/pseudo-element-roundup/

CSS 幾何圖形：https://css-tricks.com/examples/ShapesOfCSS/