::before und ::after Pseudoelemente in CSS

2024-07-12

Inhaltsverzeichnis

1. CSS-Pseudoelemente

2. ::before ::after Einführung

1、::vor

2、::nach

3. Gemeinsame Attributwerte des Inhalts

3. ::before ::after Anwendungsszenarien

1. Legen Sie einheitliche Zeichen fest

2. Fügen Sie Bilder über den Hintergrund hinzu

3. Fügen Sie dekorative Linien hinzu

4. Erweitern Sie den Pfeil rechts

5. Dialogdreieck

6. Symbol einfügen

1. CSS-Pseudoelemente

CSS-Pseudoelemente beziehen sich auf virtuelle Elemente, die mithilfe spezieller Selektoren in CSS erstellt wurden, und sind keine tatsächlich vorhandenen HTML-Elemente.

Wird verwendet, um bestimmte Teile des Dokuments auszuwählen und zu bearbeiten, um spezielle Effekte zu erzielen.
Mit Pseudoelementen können Sie den Inhalt im Dokument formatieren, ohne zusätzliche HTML-Tags hinzuzufügen.
Pseudoelemente sind auch Elemente, die verschiedene in HTML unterstützte Attribute festlegen können, einschließlich Layout, Positionierung, Breite, Höhe, Hintergrund usw. des Elements.

In diesem Artikel werden hauptsächlich die zugehörigen Inhalte und einige Verwendungsszenarien der beiden Pseudoelemente::before und ::after vorgestellt.

2. ::before ::after Einführung

Das Pseudoelement ::before ::after wird verwendet, um einen bestimmten Inhalt vor oder nach dem Element einzufügen.

Verwenden Sie das Inhaltsattribut, um den einzufügenden Inhalt anzugeben.
Muss zusammen mit dem Inhaltsattribut verwendet werden, der Inhaltsattributwert kann leer sein;
Der Anzeigeattributwert des Pseudoelements ist standardmäßig inline；

1、::vor

Der ::before-Selektor wird verwendet, um Inhalte vor dem angegebenen Element einzufügen;

(1) Grammatik


元素::before{
    content: "要插入的内容";
    /* 其他属性 */
}

(2) Beispiel

Fügen Sie Inhalte vor allen p-Elementen auf der Seite ein;


<style>
    p::before{
        content: "使用::before伪元素插入的内容——";
        /* 其他属性 */
    }
</style>
<body>
    <div>
        <p>第一个P标签中的内容</p>
        <p>第二个P标签中的内容</p>
        <p>第三个P标签中的内容</p>
    </div>
</body>

2、::nach

Der ::after-Selektor wird verwendet, um Inhalte nach dem angegebenen Element einzufügen;

(1) Grammatik


元素::after{
    content: "要插入的内容";
    /* 其他属性 */
}

(2) Beispiel

Fügen Sie den Inhalt nach allen p-Elementen auf der Seite ein.


<style>
    p::after{
        content: "——使用::after伪元素插入的内容";
        /* 其他属性 */
    }
</style>
<body>
    <div>
        <p>第一个P标签中的内容</p>
        <p>第二个P标签中的内容</p>
        <p>第三个P标签中的内容</p>
    </div>
</body>

3. Gemeinsame Attributwerte des Inhalts

::before ::after muss zusammen mit dem Inhaltsattribut verwendet werden. Im Folgenden sind die allgemeinen Attributwerte von Inhalt aufgeführt:

Seriennummer	Attributwert	veranschaulichen
1	Schnur	Textinhalt festlegen;
2	url("URL")	Legen Sie URL-Links für Mediendateien wie Bilder fest.
3	Offenes Zitat	Als Leitzitat festlegen;
4	Zitat schließen	Auf Backquote setzen;
5	attr(Attribut)	Geben Sie das Attributattribut des Elements als Zeichenfolge zurück.
6	Schalter	Zähler einstellen;
7	keiner	Inhalt auf einen Nullwert setzen;
8	normal	In den Pseudoklassenelementen :before und :after wird es als kein Wert betrachtet, das heißt, es ist auch ein Nullwert;

(1) Textinhalt festlegen

Legen Sie den Wert des Inhaltsattributs auf den Typ „String“ fest, um Text zum Pseudoelement hinzuzufügen.


<style>
    span::before{
        content: "使用::before添加的文本前缀——————";
    }
    span::after{
        content: "————使用::after添加的文本后缀";
    }
</style>
......
<body>
    <span class="box">我是HTML元素中的文本</span>
</body>

(2) Medienlinks festlegen

Über den Attributwert url() kann der Inhalt der Mediendatei als Pseudoelement importiert werden;


<style>
    .container {
        margin: 100px;
    }
    .avatar::after{
        content: url("D:\test\girl.png");
        display: block;
    }
</style>
......
<body>
    <div class="container">
        <div class="avatar">示例图片</div>
    </div>
</body>

Beachten Sie, dass die Größe des über die URL hinzugefügten Bildes nicht eingestellt werden kann. Am besten fügen Sie das Bild über den Hintergrund hinzu.

(3) Setzen Sie Anführungszeichen vor ||

Über den Attributwert „open-quote“ oder „close-quote“ können Sie den Inhalt des Pseudoelements auf vordere oder hintere Anführungszeichen setzen.


<style>
    p:nth-child(1)::before{
        content:open-quote;
        /* 其他属性 */
    }
    p:nth-child(2)::after{
        content:close-quote;
    }
</style>
......
<body>
    <div>
        <p>添加前引号</p>
        <p>添加后引号</p>
    </div>
</body>

(4) Elementattribute abrufen

Erhalten Sie über attr() einen Attributwert des Elements (wird in Form einer Zeichenfolge zurückgegeben) und legen Sie ihn als Inhalt des Pseudoelements fest.


<style>
    a:after {
        content: " (" attr(href) ")";
    }
</style>
......
<body>
    <div><a href="https://www.csdn.net">CSDN</a>点击跳转至CSDN...</div>
    <div><a href="https://www.baidu.com">百度</a>点击跳转至百度...</div>
</body>

(5) Zähler einstellen


<style>
    div {
        counter-increment: index;
    }
    div:before {
        content:counter(index);
    }
</style>
......
<body>
    <div>、、、、、、我是第1个div、、、、、、</div>
    <div>、、、、、、我是第2个div、、、、、、</div>
    <div>、、、、、、我是第3个div、、、、、、</div>
    <div>、、、、、、我是第4个div、、、、、、</div>
</body>

3. ::before ::after Anwendungsszenarien

Obwohl die Verwendung dieser beiden Pseudoelemente::before::after sehr einfach ist, können bei flexibler Anwendung einige sehr gute CSS-Effekte erzielt werden;

1. Legen Sie einheitliche Zeichen fest


<style>
    p::before{
        content: "* ";
        color: red;
        font-size: 24px;
        /* 其他属性 */
    }
    p::after{
        content: "：____________";
        /* 其他属性 */
    }
</style>
...
<body>
    <div>
        <p>姓名</p>
        <p>年龄</p>
        <p>出生日期</p>
        <p>居住地址</p>
    </div>
</body>

2. Fügen Sie Bilder über den Hintergrund hinzu


<style>
    .container{
        margin: 100px;
    }
    .container::after{
        content: "";
        display:block;
        width: 260px;
        height: 260px;
        background-image: url("D:\test\girl.png");
        background-position: center;
        background-size: cover;
    }
</style>
......
<body>
    <div class="container">通过背景添加图片</div>
</body>

3. Fügen Sie dekorative Linien hinzu


<style>
    .line{
        display: flex;
        align-items: center;
        margin: 60px;
        height: 40px;
        font-size: 18px;
    }
    .line::before, .line::after{
        content: "";
        width: 300px;
        border-top: 6px double;
        margin: 5px;
    }
    
</style>
......
<body>
    <div class="line">添加装饰线</div>
</body>

4. Erweitern Sie den Pfeil rechts


<style>
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
 
        width: 400px;
        margin: 100px auto;
        padding: 30px 0;
        border-radius: 8px;
        box-shadow: 0 0 4px 1px #acacac;
    }
 
    .setting-item{
        position: relative;
        align-items: center;
        display: flex;
        width: 300px;
        height: 40px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }
 
    .setting-item::after{
        position: absolute;
        right: 0;
        content: "";
        width: 8px;
        height: 8px;
        border-top: 1px solid #666;
        border-right: 1px solid #666;
        transform: rotate(45deg);
    }
    
</style>
......
<body>
    <div class="container">
        <div class="setting-item">账号设置</div>
        <div class="setting-item">权限管理</div>
        <div class="setting-item">相关服务</div>
        <div class="setting-item">帮助与反馈</div>
        <div class="setting-item">......</div>
    </div>
</body>

5. Dialogdreieck


<style>
    .container {
        width: 400px;
        margin: 100px auto;
        padding: 30px 0;
        border-radius: 8px;
        box-shadow: 0 0 4px 1px yellowgreen;
    }
 
    .left-box,.right-box {
        display: flex;
    }
 
    .right-box {
        justify-content: end;
    }
 
    span {
        position: relative;
        display: flex;
        align-items: center;
 
        background-color: yellowgreen;
        border-radius: 6px;
        margin: 4px 14px;
        padding: 16px;
    }
 
    .left-box span::before, .right-box span::after{
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        background-color: yellowgreen;
        transform: rotate(45deg);
    }
 
    .left-box span::before{
        left: -6px;
    }
    .right-box span::after {
        right: -6px;
    }
</style>
 
......
 
<body>
    <div class="container">
        <div class="left-box">
            <span>Nice to meet you!</span>
        </div>
        <div class="right-box">
            <span>Nice to meet you, too!</span>
        </div>
    </div>
</body>

6. Symbol einfügen


<style>
    .login-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
 
        width: 400px;
        height: 400px;
        margin: 100px auto;
        border-radius: 8px;
        box-shadow: 0 0 4px 1px #acacac;
    }
    .title{
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 40px;
    }
    .account, .pwd, .login-btn, .forgot-pwd{
        width: 300px;
        height: 40px;
        line-height: 40px;
    }
 
    .account, .pwd{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        color: #888;
    }
    .pwd{
        margin-top: 20px;
    }
    .account::before, .pwd::before{
        content: '';
        display: inline-block;  
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        margin-right: 8px;
    }
    .account::before{
        background-image: url("D:\test\user.svg");
    }
    .pwd::before {
        background-image: url("D:\test\pwd.svg");
    }
 
    .login-btn{
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        background: #2687F0;
        border-radius: 5px;
        margin-top: 40px;
    }
 
    .forgot-pwd{
        text-align: right;
        font-size: 14px;
        color: #888;
        margin-top: 20px;
    }
</style>
......
<body>
    <div class="login-box">
        <div class="title">XXX 管理系统</div>
        <div class="account">请输入账号</div>
        <div class="pwd">请输入密码</div>
        <div class="login-btn">登 录</div>
        <div class="forgot-pwd">忘记密码</div>
    </div>
</body>

=========================================================================

Machen Sie jeden Tag ein wenig Fortschritte~!

Ein praktischer CSS-Tipp~!

Technologieaustausch