詳解CSS中的偽元素::before和::after

這篇文章帶大家了解CS​​S中的::before和::after偽元素，看看它們的應用，希望對大家有幫助！

本文從最簡單的開始，解釋如何理解和使用::before和::after。然後再在實際使用場景中去應用它。

::before和::after是什麼?

::before和::after可以加入選擇器以建立偽元素的關鍵字。偽元素被插入到與選擇器相符的元素內容之前或之後。

content屬性

#1）::before和::after下特有的content，用於在css渲染中為元素邏輯上的頭部或尾部添加內容。

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

3）這些新增不會出現在DOM中，不會改變文件內容，不可複製，只是在css渲染層加入。所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容

#content可取以下值：

string

使用引號包一段字串，將會在元素內容中加入字串

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

<p>JavaScript高级程序设计</p>

attr()

##透過attr()呼叫目前元素的屬性，例如將圖片alt提示文字或連結的href位址顯示出來。

a::after {
    content: ' → ' attr(href); /* 在 href 前显示一个箭头 */
}

 <a href="https://www.baidu.com/">百度地址</a>

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

<a href="https://www.baidu.com/">百度地址</a>

#url()/uri()

#用於引用媒體文件。例如：「百度」前面給一張圖片，後面給出href屬性。

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

<a href="https://www.baidu.com/">百度地址</a>

注意

#1）URL不能使用引號。如果你將URL用引號括起來，那麼它會變成一個字串和插入文字「url(image.jpg)」作為其內容，插入的而不是圖像本身。

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

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

/*伪元素添加图片：*/
.wrap:after{
    /*内容置为空*/
    content:"";
    /*设置背景图，并拉伸*/
    background:url("img/0詳解CSS中的偽元素::before和::after") no-repeat center;
    /*必须设置此伪元素display*/
    display:inline-block;
    /*必须设置此伪元素大小（不会被图片撑开）*/
    background-size:100%;
    width:100px;
    height:100px;
}复制代码

3）蘋果端偽元素不生效,img、input和其他的單標籤是沒有:after和:before偽元素的（在部分瀏覽器中沒有，如:蘋果端會發現無效），因為單標籤本身不能有子元素。

解決方案：給img套件一個div可以解決

4）想要動態改變偽元素的圖片，可以為目前元素添加偽元素圖片的基礎樣式，再動態class來寫偽元素的圖片。

::before和::after的應用程式

#配合quotes 屬性使用

加上括號

 h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

<h1 id="给标题加括号">给标题加括号</h1>

加上引號

 h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

<h2 id="给标题加引号">给标题加引号</h2>

不指定，預設 #

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

<h3 id="不设置quotes">不设置quotes</h3>

裝飾標題

#

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

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

<h1 id="标题">标题</h1>

佈局是透過將

元素變成3 列來實現的。左列和右列是雙線，寬度均為minmax(50px, 1fr)，這表示它們的匹配寬度始終不小於50px。標題文字整齊地居中居中。

彩帶標題

#

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

h1::before, h1::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;
}

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

h1::after {
    right: -60px;
    transform: scaleX(-1); /* 水平翻转 */
}
---------------------------
 <h1 id="标题">标题</h1>

實作更寫實的陰影

.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)}


<div class="box shadow"></div>

取代內容

有些情況下content可以不使用: :before或::after。如果content設定為單一影像，那麼你可以直接在元素上使用它來取代該元素的 HTML 內容。

如頁面上分別有以下三個內容：

加上了replace類別之後

.replace {
    content: url(img/replace.png);
}

#

1)具有简单文本的元素。它会被取代。
2)一个包含<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/136/673/630/163158500350738詳解CSS中的偽元素::before和::after?x-oss-process=image/resize,p_40" class="lazy" alt="詳解CSS中的偽元素::before和::after" >在其中的元素。它也会被取代。
3)<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/136/673/630/163158500350738詳解CSS中的偽元素::before和::after?x-oss-process=image/resize,p_40" class="lazy" alt="詳解CSS中的偽元素::before和::after" >直接一个元素。Firefox不会取代它，但其他浏览器会。

清除浮动

方式一：

.classic-clearfix::after {
    content: '';
    display: block;
    clear: both;
}

方式二：

.modern-clearfix {
    display: flow-root;
}

模拟float:center的效果

float没有center这个取值，但是可以通过伪类来模拟实现。

原理：左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

body { font: 14px/1.8 Georgia, serif;}
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }

<div>
    <img  src="/static/imghwm/default1.png" data-src="img/cat.jpg" class="lazy" alt="詳解CSS中的偽元素::before和::after" >
    <div>
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
    <div>
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
</div>

引用参考:

W3C官方文档

Diving into the ::before and ::after Pseudo-Elements

Faking ‘float: center’ with Pseudo Elements

原文地址：https://juejin.cn/post/6986629782666477599

作者：Axjy

相关推荐：《css视频教程》！

以上是詳解CSS中的偽元素::before和::after的詳細內容。更多資訊請關注PHP中文網其他相關文章！