:after和:before是什么意思？有什么用？

更新時間:2021-09-24 來源:黑馬程序員瀏覽量:

IT培訓班

:before選擇器

:before偽元素選擇器用于在被選元素的內容前面插入內容，必須配合content屬性來指定要插入的具體內容。其基本語法格式為：

<元素>:before{
    content: 文字/url();
}

在上述語法中，被選元素位于“:before”之前，“{｝”中的content屬性用來指定要插入的具體內容，該內容既可以為文本也可以為圖片。

下面通過一個案例來演示:before選擇器的用法。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>:before選擇器的使用-黑馬程序員前端高手班http://web.itheima.com</title>
    <style type="text/css">
        p:before{
            content: "傳智教育";
            color: #c06;
            font-size: 20px;
            font-family: "微軟雅黑";
            font-weight: bold;
        }
        a {color:black; text-decoration: none;}
　   </style>
</head>
<body>
    <p>黑馬程序員專注于Java、python大數據、web前端開發(fā)、人工智能、UI設計、軟件測試、新媒體+短視頻直播運營、產品經理、Linux+運維開發(fā)人才的培養(yǎng)，提供的<a href="http://m.3rdspacecomics.com/taught/taughtweb.html" target="_blank">免費視頻教程</a>。</p>
</body>
</html>

before選擇器的用法

:after選擇器

:after偽元素選擇器用于在某個元素之后插入一些內容，使用方法與:before選擇器相同。下面通過一個案例來做具體演示。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>:after選擇器的使用-黑馬程序員前端高手班http://web.itheima.com</title>
    <style>
        p:after{content: url(../../images/薪資.jpg);}
        a {color:black; text-decoration: none;}
    </style>
</head>
<body>
    <p>黑馬程序員專注于Java、python大數據、web前端開發(fā)、人工智能、UI設計、軟件測試、新媒體+短視頻直播運營、產品經理、Linux+運維開發(fā)人才的培養(yǎng)，提供的<a href="http://m.3rdspacecomics.com/taught/taughtweb.html" target="_blank">免費視頻教程</a>。</p>
</body>
</html>

在上面案例中，第7行代碼“p:after{content: url(../../images/薪資.jpg);}”用于在段落之后添加一張圖片。

after選擇器的用法