首頁技術(shù)文章正文

CSS3中:before選擇器和:after選擇器的用法詳細(xì)介紹

更新時(shí)間:2021年09月24日10時(shí)38分來源:傳智教育瀏覽次數(shù):

:before選擇器

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

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

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

下面通過一個(gè)案例來演示: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大數(shù)據(jù)、web前端開發(fā)、人工智能、UI設(shè)計(jì)、軟件測試、新媒體+短視頻直播運(yùn)營、產(chǎn)品經(jīng)理、Linux+運(yùn)維開發(fā)人才的培養(yǎng)，提供的<a href="http://www.itheima.com/taught/taughtweb.html" target="_blank">免費(fèi)視頻教程</a>。</p>
</body>
</html>

before選擇器的用法

:after選擇器

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

<!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大數(shù)據(jù)、web前端開發(fā)、人工智能、UI設(shè)計(jì)、軟件測試、新媒體+短視頻直播運(yùn)營、產(chǎn)品經(jīng)理、Linux+運(yùn)維開發(fā)人才的培養(yǎng)，提供的<a href="http://www.itheima.com/taught/taughtweb.html" target="_blank">免費(fèi)視頻教程</a>。</p>
</body>
</html>

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

after選擇器的用法