小編給大家分享一下CSS中偽元素::before和::after怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)公司已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、徽縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

::before和::after是什么?

::before和::after可以添加到選擇器以創(chuàng)建偽元素的關(guān)鍵字。偽元素被插入到與選擇器匹配的元素內(nèi)容之前或之后。

content屬性

1）::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。

2）::before和::after必須配合content屬性來(lái)使用，content用來(lái)定義插入的內(nèi)容，content必須有值，至少是空

3）這些添加不會(huì)出現(xiàn)在DOM中，不會(huì)改變文檔內(nèi)容，不可復(fù)制，僅僅是在css渲染層加入。所以不要用:before或:after展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容

content可取以下值：

string

使用引號(hào)包一段字符串，將會(huì)向元素內(nèi)容中添加字符串

 p::before{
    content: "《";
    color: #000000;
}
p::after{
    content: "》";
    color:#000000;
}

JavaScript高級(jí)程序設(shè)計(jì)

attr()

通過attr()調(diào)用當(dāng)前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來(lái)。

a::after {
    content: ' → ' attr(href); /* 在 href 前顯示一個(gè)箭頭 */
}

 百度地址

 a::after{
    content: "【" attr(href) "】";
}

百度地址

url()/uri()

用于引用媒體文件。比如：“百度”前面給出一張圖片，后面給出href屬性。

a::before{
    content: url("img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}

百度地址

注意

1）URL不能使用引號(hào)。如果你將URL用引號(hào)括起來(lái)，那么它會(huì)變成一個(gè)字符串和插入文本“url(image.jpg)”作為其內(nèi)容，插入的而不是圖像本身。

2）content屬性，直接使用圖片，即使寫width,height也無(wú)法改變圖片大小;

解決方案：如果要解決這個(gè)問題，可以把content:''寫成空，使用background:url()來(lái)添加圖片

/*偽元素添加圖片：*/
.wrap:after{
    /*內(nèi)容置為空*/
    content:"";
    /*設(shè)置背景圖，并拉伸*/
    background:url("img/06.png") no-repeat center;
    /*必須設(shè)置此偽元素display*/
    display:inline-block;
    /*必須設(shè)置此偽元素大?。ú粫?huì)被圖片撐開）*/
    background-size:100%;
    width:100px;
    height:100px;
}復(fù)制代碼

3）蘋果端偽元素不生效,img、input和其他的單標(biāo)簽是沒有:after和:before偽元素的（在部分瀏覽器中沒有，如:蘋果端會(huì)發(fā)現(xiàn)無(wú)效），因?yàn)閱螛?biāo)簽本身不能有子元素。

解決方案：給img包一個(gè)div可以解決

4）想要?jiǎng)討B(tài)改變偽元素的圖片，可以給當(dāng)前元素添加偽元素圖片的基礎(chǔ)樣式，再動(dòng)態(tài)class來(lái)寫偽元素的圖片。

::before和::after的應(yīng)用

配合quotes 屬性使用

加括號(hào)

 h2{
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號(hào)*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

給標(biāo)題加括號(hào)

加引號(hào)

 h3{
    quotes:"\"" "\"";  /*添加雙引號(hào)要轉(zhuǎn)義*/
}
h3::before{
    content:open-quote;
}
h3::after{
    content:close-quote;
}

給標(biāo)題加引號(hào)

不指定，默認(rèn)

 h4::before{
    content:open-quote;
}
h4::after{
    content:close-quote;
}

不設(shè)置quotes

裝飾標(biāo)題

h2 {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 40px;
}

h2::before, h2::after {
    content: '';
    border-top: 6px double;
}

標(biāo)題

布局是通過將

元素變成 3 列來(lái)實(shí)現(xiàn)的。左列和右列是雙線，寬度均為minmax(50px, 1fr)，這意味著它們的匹配寬度始終不小于50px。標(biāo)題文本整齊地居中居中。

彩帶標(biāo)題

 h2 {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 40px;
    text-align: center;
    background-color: #875e46;
}

h2::before, h2::after {
    content: '';
    width: 80px;
    height: 100%;
    background-color: #724b34;

    /* 定位彩帶兩端形狀的位置，并且放在最底層 */
    position: absolute;
    z-index: -1;
    top: 20px;

    /* 彩帶兩端的形狀 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

    /* 繪制并定位彩帶的陰影三角形 */
    background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

h2::before {
    left: -60px;
}

h2::after {
    right: -60px;
    transform: scaleX(-1); /* 水平翻轉(zhuǎn) */
}
---------------------------
 
標(biāo)題

實(shí)現(xiàn)更逼真的陰影

.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}
.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}
.shadow::after,.shadow::before{position:absolute;z-index:-1;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);content:"";transform:rotate(-3deg)}
.shadow::after{right:10px;left:auto;transform:rotate(3deg)}