Css3 偽元素::before和::after

阿新 • • 發佈：2021-07-14

一、::before / ::after 簡介

::before和::after是 CSS 中的偽類，它們基本功能是在 CSS 渲染中向元素的內容前面和後面插入內容。雖然在實際 HTML 中我們沒有增加任何標籤，並且會在瀏覽器中展現出來。

::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。

預設情況下，偽類元素的display是預設值inline，可以通過設定display:block來改變其顯示。

二、Content 屬性的值

1. string

    <style>
        .phoneNumber::before  
{
            content: '\260E';
            font-size: 15px;
        }
    </style>
    

    <p class="phoneNumber">12345645654</p>

2.attr()

    <style>
        a::after {
            content: attr(href);
            color: red;
        }
    </style>

    <a href="http://www.jnqianle.cn" 
>千樂微雲</a> 
    <br>

    <a href="http://www.jnqianle.cn">千樂微雲</a> 
    <br>

3.url()/uri()

    <style>
        a::before {
            content: url('http://www.jnqianle.cn/img/index/logo.png');
           
        }
    </style>

    <a href="http://www.jnqianle.cn" 
>千樂微雲</a> 
    <br>

    <a href="http://www.jnqianle.cn">千樂微雲</a> 
    <br>

4.counter()

配合counter-increment和counter-reset屬性使用：

h2:before { counter-increment: chapter;content: "Chapter " counter(chapter) ". "}

<style>
 2 body{
 3     counter-reset: section;
 4 }
 5 h1{
 6     counter-reset: subsection;
 7 }
 8 h1:before{
 9     counter-increment:section;
10     content:counter(section) "、";
11 }
12 h2:before{
13     counter-increment:subsection;
14     content: counter(section) "." counter(subsection) "、";
15 }
16 </style>
17 ------------------------------------------------
18 <body>
19 <h1>HTML tutorials</h1>
20 <h2>HTML Tutorial</h2>
21 <h2>XHTML Tutorial</h2>
22 <h2>CSS Tutorial</h2>
23 
24 <h1>Scripting tutorials</h1>
25 <h2>JavaScript</h2>
26 <h2>VBScript</h2>
27 
28 <h1>XML tutorials</h1>
29 <h2>XML</h2>
30 <h2>XSL</h2>
31 
32 </body>

View Code

三、使用案例和技巧

1.清楚浮動，強烈推薦

    <style>
        .block {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            border: 1px solid green;
        }
        /*去除首尾浮動*/
        .out::before,
        .out::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

    <div class="out">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>

    <a href="http://www.jnqianle.cn">千樂微雲</a>
    <br>

    <a href="http://www.jnqianle.cn">千樂微雲</a>
    <br>

View Code

2.標題效果處理

    <style>
     .title{
         font-size: 20px;
         font-weight: bold;
         padding: 5px 10px;
         display: inline-block;
         border: 1px solid #ddd;
     }
     .title::before{
         content: '《';
         color: green;
     }
     .title::after{
         content: '》';
         color: green;
     }
    </style>

    <div class="title">標題1</div>
    <div class="title">標題2</div>
    <div class="title">標題3</div>

3.多邊形

<style>
#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}

#star-six::after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}
</style>

<div id="star-six"></div>

View Code

    <style type="text/css">
        #phone {
            width: 50px;
            height: 50px;
            border-left: 6px solid #EEB422;
            border-radius: 20%;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            margin: 20px;
            margin-right: 0px;
            position: relative;
            display: inline-block;
            top: -5px;
        }

        #phone:before {
            width: 15px;
            height: 15px;
            background: #EEB422;
            border-radius: 20%;
            content: "";
            position: absolute;
            left: -2px;
            top: 1px;
        }

        #phone:after {
            width: 15px;
            height: 15px;
            background: #EEB422;
            border-radius: 20%;
            content: "";
            position: absolute;
            left: -3px;
            top: 34px;
        }
    </style>
    <div id="wraper">
        <div id="phone"></div>
    </div>

View Code

4.給blockquote新增引號

    <style type="text/css">
        blockquote{
            border: 1px solid red;
        }
        blockquote::before {
            content: open-quote;
            color: #ddd;
            z-index: -1;
            font-size: 40px;
        }
        blockquote::after {
            content: close-quote;
            color: #ddd;
            z-index: -1;
            font-size: 40px;
        }
    </style>
    <blockquote>引用一個段落,雙引號用::before偽元素實現引用一個段落,雙引號用::before偽元素實現</blockquote>

View Code

5.會話框箭頭效果

    <style>
        .left,
        .right {
            min-height: 40px;
            position: relative;
            display: table;
            text-align: center;
            border-radius: 7px;
            background-color: #9EEA6A;
            margin: 0;
        }

        .left {
            left: 10px;
        }

        .left::before,
        .right::after {
            position: absolute;
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            top: 11px;

        }

        .left::before {
            border: 8px solid transparent;
            border-right: 8px solid #9EEA6A;
            left: -16px;
        }

        .right::after {
            right: -16px;
            border-left: 8px solid #9EEA6A;
        }

        .left p,
        .right p {
            display: table-cell;
            vertical-align: middle;
            padding: 0 10px;
        }

        .right {
            right: -150px;
        }
    </style>
    <!-- 對話方塊 -->
    <div class="left">
        <p>最近怎麼樣</p>
    </div>
    <div class="right">
        <p>挺好的，最近有點忙，沒有怎麼聯絡你</p>
    </div>