教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

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

:before選擇器

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

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

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

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

before選擇器的用法


:after選擇器

:after偽元素選擇器用于在某個元素之后插入一些內(nèi)容,使用方法與: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大數(shù)據(jù)、web前端開發(fā)、人工智能、UI設(shè)計、軟件測試、新媒體+短視頻直播運營、產(chǎn)品經(jīng)理、Linux+運維開發(fā)人才的培養(yǎng),提供的<a href="http://www.itheima.com/taught/taughtweb.html" target="_blank">免費視頻教程</a>。</p>
</body>
</html>

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

after選擇器的用法



猜你喜歡:

怎么用css3畫三角形?css繪制三角形圖文教程

CSS3 box-shadow的用法|box-shadow屬性詳解

JavaScript動畫和CSS3動畫有什么區(qū)別?

CSS3如何設(shè)置顏色不透明度?

傳智教育HTML&JS+前端高手班

0 分享到:
和我們在線交談!