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

創(chuàng)新互聯(lián)建站主營賈汪網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),賈汪h5成都小程序開發(fā)搭建,賈汪網(wǎng)站營銷推廣歡迎賈汪等地區(qū)企業(yè)咨詢

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

語法

假設(shè)我們有以下簡單的html標(biāo)記：

<p>paragraph text</p>

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

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

結(jié)果是：

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

圖標(biāo)

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

同樣，我們有相同的標(biāo)記

段落文字

看下面的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導(dǎo)出的20x20圖像。以下是瀏覽器的外觀：

樣式外部鏈接

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

<p>Krasimir Tsonev is <a href="http://krasimirtsonev.com">developer</a>who likes to write and <a href="https://twitter.com/KrasimirTsonev">tweet</a>.</p>

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

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;
    }

面包屑（導(dǎo)航）

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

HTML：

<p>
    <a href="#">Home</a>
    <a href="#">Team</a>
    <a href="#">Developers</a>
</p>

只需幾行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)這非常有幫助。主要是因為我不必在生成導(dǎo)航的代碼中關(guān)注這一點。我的意思是如果我必須用PHP構(gòu)建相同的東西我應(yīng)該寫一些額外的代碼。例如：

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

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

清除漂浮物

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

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

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

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

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

引用

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

<p> 
    Martin Fowler said    
    <span class="quoted">Any fool can write code that a computer can understand. 
    Good programmers write code that humans can understand.
    </span>
</p>

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

開始，我們的標(biāo)記看起來像這樣

<h3>What is CSS?</h3>
<div class="popup">
    Cascading Style Sheets is a style sheet language used for describing
    the presentation semantics of a document written in a markup language.
    </div>

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

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;
    }

設(shè)計不同的標(biāo)題類型

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

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

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元素是你可以設(shè)置HTML樣式而不添加新的DOM節(jié)點最好用的方法。

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

文章名稱：css中:before和:after的使用示例-創(chuàng)新互聯(lián)
鏈接地址：http://chinadenli.net/article30/cdospo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站排名、用戶體驗、網(wǎng)站導(dǎo)航、網(wǎng)站制作、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)