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

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

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

語法

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

<p>paragraph text</p>

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

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

結果是：

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

圖標

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

同樣，我們有相同的標記

段落文字

看下面的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圖像。以下是瀏覽器的外觀：

樣式外部鏈接

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

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

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

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實現相同的效果。

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

結果如下：

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

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

$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代碼不應該對事物的外觀負責。

清除漂浮物

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

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

將產生以下布局：

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

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

引用

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

<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才能實現以下效果：

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

箭頭

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

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

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

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

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

設計不同的標題類型

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

這個就是我們利用：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節點最好用的方法。

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