Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::after

Artikel ini akan membawa anda memahami ::before dan ::after pseudo-elemen dalam CSS dan melihat aplikasinya, saya harap ia akan membantu anda.

Artikel ini bermula dari yang paling mudah dan menerangkan cara memahami dan menggunakan ::sebelum dan ::selepas. Kemudian gunakannya dalam senario penggunaan sebenar.

Apakah::sebelum dan ::selepas

::sebelum dan ::selepas ialah kata kunci yang boleh ditambahkan pada pemilih untuk mencipta unsur-unsur pseudo. Elemen pseudo dimasukkan sebelum atau selepas kandungan elemen yang sepadan dengan pemilih.

atribut kandungan

1) Untuk kandungan unik kepada ::sebelum dan ::selepas, gunakan Digunakan untuk menambah kandungan pada kepala logik atau ekor elemen dalam pemaparan CSS.

2) ::sebelum dan ::selepas mesti digunakan dengan atribut kandungan digunakan untuk menentukan kandungan yang disisipkan mesti mempunyai nilai, sekurang-kurangnya kosong

3) Ini tambahan tidak akan Muncul dalam DOM tidak akan mengubah kandungan dokumen dan tidak boleh disalin. Ia hanya ditambah dalam lapisan pemaparan CSS. Jadi jangan gunakan :sebelum atau :selepas untuk memaparkan kandungan yang bermakna, cuba gunakannya untuk memaparkan kandungan hiasan

kandungan boleh mengambil nilai berikut:

rentetan

Menggunakan petikan untuk membalut rentetan akan menambah rentetan

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

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

attr()

Panggil atribut elemen semasa melalui attr(), seperti memaparkan teks gesaan alt imej atau alamat href pautan.

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() Untuk memetik fail media. Contohnya: "Baidu" memberikan gambar di hadapan dan atribut href di belakang.

Nota

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

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

1) URL tidak boleh menggunakan tanda petikan. Jika anda melampirkan URL dalam petikan, maka ia menjadi rentetan dan memasukkan teks "url(image.jpg)" sebagai kandungannya, bukannya imej itu sendiri.

2) Atribut kandungan, gunakan imej secara langsung Walaupun anda menulis lebar dan tinggi, anda tidak boleh menukar saiz imej; anda boleh meletakkan kandungan:'' Tulis sebagai kosong dan gunakan background:url() untuk menambah gambar

3) Elemen pseudo Apple tidak berkuat kuasa img, input dan single lain tag tidak mempunyai :after dan :before pseudo-elements (tidak tersedia dalam sesetengah penyemak imbas, contohnya, Apple akan mendapati ia tidak sah), kerana tag tunggal itu sendiri tidak boleh mempunyai elemen anak.

Penyelesaian: Membungkus img dengan div boleh menyelesaikan masalah

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

4) Jika anda ingin menukar imej unsur pseudo secara dinamik, anda boleh menambah asas gaya imej unsur pseudo kepada elemen semasa , dan kemudian gunakan kelas dinamik untuk menulis gambar unsur pseudo.

Aplikasi::sebelum dan ::selepas

Gunakan dengan atribut petikan

Tambah kurungan

Tambah tanda petikan

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

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

Tidak dinyatakan, lalai

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

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

Tajuk hiasan

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

<h3>不设置quotes</h3>

Susun aturnya ialah dilakukan dengan meletakkan Elemen

dilaksanakan dengan menjadi 3 lajur. Lajur kiri dan lajur kanan ialah garisan berganda dengan lebar minmax(50px, 1fr), yang bermaksud bahawa lebar padanannya sentiasa tidak kurang daripada 50px. Teks tajuk dipusatkan dengan kemas.

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>标题</h1>

Tajuk reben<h1>

Mencapai lebih realistik Bayangan

 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>标题</h1>

menggantikan kandungan

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

dalam sesetengah kes Ia tidak perlu menggunakan ::before atau ::after. Jika kandungan ditetapkan kepada satu imej, maka anda boleh menggunakannya secara langsung pada elemen untuk menggantikan kandungan HTML elemen tersebut. Contohnya, terdapat tiga kandungan berikut pada halaman:

Selepas menambah kelas ganti

1)具有简单文本的元素。它会被取代。
2)一个包含<img alt="Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::after" >在其中的元素。它也会被取代。
3)<img alt="Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::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 id="page-wrap">
    <img  src="img/cat.jpg" id="logo" alt="Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::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>

引用参考:

W3C官方文档

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

Faking ‘float: center’ with Pseudo Elements

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

作者：Axjy

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

Atas ialah kandungan terperinci Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::after. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!