首頁(yè)技術(shù)文章正文

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

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

IT培訓(xùn)班

: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ì)、軟件測(cè)試、新媒體+短視頻直播運(yùn)營(yíng)、產(chǎn)品經(jīng)理、Linux+運(yùn)維開發(fā)人才的培養(yǎng),提供的<a href="http://pantone-color.com.cn/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ì)、軟件測(cè)試、新媒體+短視頻直播運(yùn)營(yíng)、產(chǎn)品經(jīng)理、Linux+運(yùn)維開發(fā)人才的培養(yǎng),提供的<a href="http://pantone-color.com.cn/taught/taughtweb.html" target="_blank">免費(fèi)視頻教程</a>。</p>
</body>
</html>

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

after選擇器的用法



猜你喜歡:

CSS怎樣更換鼠標(biāo)樣式?

圓角矩形css怎么寫?

清除input默認(rèn)樣式

CSS中px、em、rem有什么區(qū)別和不同?

黑馬程序員HTML&JS+前端高手班

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!