Detaillierte Erklärung der Pseudoelemente in CSS::before und ::after

Dieser Artikel wird Ihnen helfen, die Pseudoelemente ::before und ::after in CSS zu verstehen und ihre Anwendungen zu sehen. Ich hoffe, er wird Ihnen hilfreich sein!

Dieser Artikel beginnt mit dem Einfachsten und erklärt, wie man ::before und ::after versteht und verwendet. Wenden Sie es dann in tatsächlichen Nutzungsszenarien an.

Was sind::before und ::after?

::before und ::after sind Schlüsselwörter, die zu Selektoren hinzugefügt werden können, um Pseudoelemente zu erstellen. Pseudoelemente werden vor oder nach dem Inhalt des zum Selektor passenden Elements eingefügt.

Inhaltsattribut

1) Der eindeutige Inhalt unter ::before und ::after wird verwendet, um Inhalt zum logischen Kopf oder Ende des Elements beim CSS-Rendering hinzuzufügen.

2) ::before und ::after müssen mit dem Attribut content verwendet werden, um den eingefügten Inhalt zu definieren. Der Inhalt muss einen Wert haben, der mindestens leer ist.

3) Diese Zusätze werden nicht im DOM angezeigt ändert sich nicht Der Inhalt des Dokuments kann nicht kopiert werden, er wird nur in der CSS-Rendering-Ebene hinzugefügt. Verwenden Sie also nicht :before oder :after, um aussagekräftige Inhalte anzuzeigen, sondern versuchen Sie, sie zur Anzeige dekorativer Inhalte zu verwenden.

Inhalt kann die folgenden Werte annehmen:

string

Verwenden Sie Anführungszeichen, um eine Zeichenfolge einzuschließen, die hinzugefügt wird zum Elementinhalt String

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

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

attr()

ruft über attr() die Attribute des aktuellen Elements auf, z. B. die Anzeige des Bild-Alt-Textes oder der href-Adresse des Links.

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()

wird zum Referenzieren von Mediendateien verwendet. Beispiel: „Baidu“ gibt vorne ein Bild und hinten das href-Attribut an.

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

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

Hinweis

1) URLs dürfen keine Anführungszeichen verwenden. Wenn Sie die URL in Anführungszeichen setzen, wird sie zu einer Zeichenfolge und fügt anstelle des Bildes selbst den Text „url(image.jpg)“ als Inhalt ein.

2) Inhaltsattribut, verwenden Sie das Bild direkt, die Bildgröße kann nicht geändert werden.

Lösung: Wenn Sie dieses Problem lösen möchten, können Sie den Inhalt als leer schreiben Verwenden Sie „background:url()“ und fügen Sie Bilder hinzu. wie zum Beispiel: Apple wird sie für ungültig halten), da ein einzelnes Tag selbst keine untergeordneten Elemente haben kann.

Lösung: Wickeln Sie ein div in das Bild ein, um das Problem zu lösen

4) Wenn Sie das Bild des Pseudoelements dynamisch ändern möchten, können Sie den Grundstil des Pseudoelementbilds zum aktuellen Element hinzufügen und Verwenden Sie dann die dynamische Klasse, um das Bild des Pseudoelements zu schreiben.

::vor und ::nach der Anwendung

Mit Anführungszeichen-Attribut verwenden

Klammern hinzufügen

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

Anführungszeichen hinzufügen

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

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

Nicht angegeben, Standardeinstellung

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

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

Dekorationstitel

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

<h3>不设置quotes</h3>

Das Layout wird erreicht, indem das

-Element in 3 Spalten umgewandelt wird. Die linke und rechte Spalte sind Doppellinien mit einer Breite von minmax(50px, 1fr), was bedeutet, dass ihre übereinstimmende Breite immer nicht weniger als 50px beträgt. Der Titeltext ist sauber zentriert.

<h1></h1>

Bandtitel

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>

realistischere Schatten erzielen

 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>

Ersatzinhalt

In manchen Fällen ist die Verwendung von ::before für Inhalte nicht erforderlich oder: :nachher. Wenn der Inhalt auf ein einzelnes Bild festgelegt ist, können Sie ihn direkt für ein Element verwenden, um den HTML-Inhalt dieses Elements zu ersetzen.

Zum Beispiel gibt es die folgenden drei Inhalte auf der Seite:

Nach dem Hinzufügen der Ersetzungsklasse

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

1)具有简单文本的元素。它会被取代。
2)一个包含<img alt="Detaillierte Erklärung der Pseudoelemente in CSS::before und ::after" >在其中的元素。它也会被取代。
3)<img alt="Detaillierte Erklärung der Pseudoelemente in CSS::before und ::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  alt="Detaillierte Erklärung der Pseudoelemente in CSS::before und ::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视频教程》！

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Pseudoelemente in CSS::before und ::after. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!