css中:before和:after的使用示例

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

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

語(yǔ)法

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

<p>paragraph text</p>

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

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

結(jié)果是：

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

圖標(biāo)

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

同樣，我們有相同的標(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)品中看到了這一點(diǎn)。以不同方式設(shè)置指向外部資源的鏈接是一種很好的做法。這可以通過(guò)上述技術(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>

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

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)你做面包屑時(shí)，它們之間有鏈接和分隔符。而不是在DOM中添加元素，您可以使用純css實(shí)現(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)生了一下效果。首先，在所有鏈接之前都有一個(gè)符號(hào)。我結(jié)合兩個(gè)偽元素的第一個(gè)子元素和before表示：“加入了?在第一鏈接之前”。最后，我做了同樣的事情，從列表中的最后一個(gè)鏈接中刪除分隔符。

我發(fā)現(xiàn)這非常有幫助。主要是因?yàn)槲也槐卦谏蓪?dǎo)航的代碼中關(guān)注這一點(diǎn)。我的意思是如果我必須用PHP構(gòu)建相同的東西我應(yīng)該寫(xiě)一些額外的代碼。例如：

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

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

清除漂浮物

使用float屬性仍然很好。畢竟它對(duì)布局組織有很大幫助。但是，一旦元素浮動(dòng)，您需要另一個(gè)元素來(lái)清除浮動(dòng)。否則結(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é)點(diǎn)，可以使用偽元素：before清除浮點(diǎn)數(shù)：

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

引用

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

<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才能實(shí)現(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)頁(yè)設(shè)計(jì)時(shí)，有時(shí)候會(huì)為彈出窗口或工具提示添加一些好看的裝飾。直接編碼它們有點(diǎn)困難。幸運(yùn)的是，我們可以在沒(méi)有其他圖片或JavaScript時(shí)利用CSS文件解決這個(gè)問(wèn)題。下面我們就來(lái)具體看一看。

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

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

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

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è)計(jì)不同的標(biāo)題類型

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

這個(gè)就是我們利用：before和：after設(shè)計(jì)出來(lái)的：

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é)點(diǎn)最好用的方法。

看完了這篇文章，相信你對(duì)css中:before和:after的使用示例有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！