詳解CSS中的偽元素::before和::after-css教學-PHP中文網

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

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

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

::before和::after是什麼?

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

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

content屬性

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

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

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

#content可取以下值：

string

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

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

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

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

登入後複製

attr()

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

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

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

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

登入後複製

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

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

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

登入後複製

#url()/uri()

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

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

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 屬性使用

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

加上括號

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

<h1>给标题加括号</h1>

登入後複製

加上引號

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

<h2>给标题加引号</h2>

登入後複製

不指定，預設 #

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

<h3>不设置quotes</h3>

登入後複製

裝飾標題

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

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: &#39;&#39;;
    border-top: 6px double;
}

<h1>标题</h1>

登入後複製

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

彩帶標題

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

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

h1::before, h1::after {
    content: &#39;&#39;;
    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>标题</h1>

登入後複製

實作更寫實的陰影

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

.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 內容。

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

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

加上了replace類別之後

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

登入後複製

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

1)具有简单文本的元素。它会被取代。
2)一个包含<img alt="詳解CSS中的偽元素::before和::after" >在其中的元素。它也会被取代。
3)<img alt="詳解CSS中的偽元素::before和::after" >直接一个元素。Firefox不会取代它，但其他浏览器会。

清除浮动

方式一：

.classic-clearfix::after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}

登入後複製

方式二：

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

登入後複製

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

模拟float:center的效果

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

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

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

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 id="page-wrap">
    <img  src="img/cat.jpg" id="logo" alt="詳解CSS中的偽元素::before和::after" >
    <div id="l">
        <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 id="r">
        <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>

登入後複製

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