小編給大家分享一下css中:before和:after的使用示例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站主營涇源網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,App定制開發(fā),涇源h5成都微信小程序搭建,涇源網(wǎng)站營銷推廣歡迎涇源等地區(qū)企業(yè)咨詢

根據(jù)定義：before和：after是CSS的偽元素，我們可以使用它們在元素內(nèi)容之前或之后插入內(nèi)容，有很多的文章都給出了它們的基礎知識，所以我想寫一篇關于:before和:after在實際應用的文章，表示我們正在使用它們。

語法

假設我們有以下簡單的html標記：

paragraph text

我們可以使用這樣的偽元素：

p:before {
    content: "this is ";    
    font-weight: bold;    
    font-style: italic;
}

結(jié)果是：

請注意，實際上是在內(nèi)容之前或之后添加元素。它不是出現(xiàn)在所選元素旁邊的東西，而是與其內(nèi)容相關。（推薦課程：css視頻教程）

圖標

使用:before和:after實現(xiàn)一個小圖標是非常好用的，因為你可以添加每個CSS樣式屬性，所以可以將新創(chuàng)建的元素設置為一個塊元素并附加背景圖像。

同樣，我們有相同的標記

段落文字

看下面的CSS代碼：

p:before {
    content: "";
    display: block;
    background: url("icon.jpg") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
    }

icon.jpg是從Photoshop導出的20x20圖像。以下是瀏覽器的外觀：

樣式外部鏈接

我在很多產(chǎn)品中看到了這一點。以不同方式設置指向外部資源的鏈接是一種很好的做法。這可以通過上述技術輕松完成。假設我們有以下段落的文字：

Krasimir Tsonev is developerwho likes to write and tweet.

我們可以在該鏈接后添加一個小圖標，表示它指向當前域之外的頁面。

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
    }
a:after {
    content: "";
    display: inline-block;
    background: url("icon-external.jpg") no-repeat top right;
    width: 14px;
    height: 12px;
    }

面包屑（導航）

通常當你做面包屑時，它們之間有鏈接和分隔符。而不是在DOM中添加元素，您可以使用純css實現(xiàn)相同的效果。

HTML：

    Home
    Team
    Developers

只需幾行CSS：

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
    }
a:after {
    content: " /";}
a:first-child:before {
    content: " ? ";
    }
a:last-child:after {
    content: "";
    }

結(jié)果如下：

上述結(jié)果產(chǎn)生了一下效果。首先，在所有鏈接之前都有一個符號。我結(jié)合兩個偽元素的第一個子元素和before表示：“加入了?在第一鏈接之前”。最后，我做了同樣的事情，從列表中的最后一個鏈接中刪除分隔符。

我發(fā)現(xiàn)這非常有幫助。主要是因為我不必在生成導航的代碼中關注這一點。我的意思是如果我必須用PHP構(gòu)建相同的東西我應該寫一些額外的代碼。例如：

$links = array('Home', 'Team', 'Developers');
$str = '? ';for($i=0; $i'.$links[$i].'';
    if($i < count($links)-1) 
    {
        $str .= ' / ';
    }
    }
    echo $str;

即在上面的代碼中，我在鏈接前添加了符號，并在PHP中添加了分隔符的一些邏輯。這有些不對，因為PHP代碼不應該對事物的外觀負責。

清除漂浮物

使用float屬性仍然很好。畢竟它對布局組織有很大幫助。但是，一旦元素浮動，您需要另一個元素來清除浮動。否則結(jié)果不太好。例如，以下代碼：

* html
Home
Products
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at purus ac lacus ultrices vehicula.
* css
a {
    float: left;
    display: block;
    width: 100px;
    ... other styling
    }

將產(chǎn)生以下布局：

文本應該在鏈接下面，而不是添加新的DOM節(jié)點，可以使用偽元素：before清除浮點數(shù)：

p:before {
    content: "";
    display: block;
    clear: both;
    }

引用

：before和：after非常適合引用文本。假設我們有一個想法，我們想要格式化它。

 
    Martin Fowler said    
    Any fool can write code that a computer can understand. 
    Good programmers write code that humans can understand.
    

只有使用CSS才能實現(xiàn)以下效果：

span.quoted {
    font-family: Georgia;
    font-size: 16px;
    display: block;
    margin: 14px 0 0 0;
    font-style: italic;
    }
    span.quoted:before {
    content: "“";
    font-size: 40px;
    color: #999;
    line-height: 0;
    display: inline-block;
    margin: 0 6px 0 0;
    }
    span.quoted:after {
    content: " ”";
    font-size: 40px;
    color: #999;
    line-height: 0;
    display: inline-block;
    margin: 0 0 0 4px;
    }

箭頭

在網(wǎng)頁設計時，有時候會為彈出窗口或工具提示添加一些好看的裝飾。直接編碼它們有點困難。幸運的是，我們可以在沒有其他圖片或JavaScript時利用CSS文件解決這個問題。下面我們就來具體看一看。

開始，我們的標記看起來像這樣

What is CSS?

    Cascading Style Sheets is a style sheet language used for describing
    the presentation semantics of a document written in a markup language.
    

我們左邊有一個標題，右邊有彈出窗口。我們需要在描述文本的左側(cè)添加這個小箭頭指向標題；怎么解決這個問題呢？我們可以使用簡單的邊框樣式制作箭頭并將這樣的元素附加到彈出窗口中。

h3 {
    float: left;
    width: 170px;
    }
    .popup {
    float: left;
    width: 340px;
    background: #727272;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    position: relative;
    font-size: 12px;
    line-height: 20px;
    }
    .popup:before {
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #727272; 
    position: absolute;
    top: 16px;
    left: -12px;
    }

設計不同的標題類型

目前有一個單頁網(wǎng)站的項目，項目中有不同部分的標題。每個標題都包含兩行。以下是最終設計的樣子：

這個就是我們利用：before和：after設計出來的：

h3 {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    h3:after {
    display: inline-block;
    margin: 0 0 8px 20px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: 140px;
    }
    h3:before {
    display: inline-block;
    margin: 0 20px 8px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: 140px;
    }

偽元素：after和：before元素是你可以設置HTML樣式而不添加新的DOM節(jié)點最好用的方法。

看完了這篇文章，相信你對css中:before和:after的使用示例有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！