Die Funktionen und Verwendung von :after und :before in CSS

In diesem Kapitel werden Ihnen die Funktionen und die Verwendung von :after und :before in CSS vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Die Hauptfunktion von :before und :after besteht darin, bestimmte Inhalte vor und nach dem Elementinhalt hinzuzufügen. Beispiel:

HTML-Code:

rrree

CSS-Code:

<p>你好</p>

Der Effekt ist wie folgt:

Der obige Code ist die grundlegende Verwendung von :before und :after, aber da Es gibt viele weitere Pseudoklassen, die bequemer zu verwenden sind.

2. :nach dem Löschen von Float

Nachdem ein Element auf Float gesetzt wurde, wird das Layout seines übergeordneten Elements und der Geschwisterelemente des übergeordneten Elements beeinflusst, z Der Hintergrundrand des übergeordneten Elements kann nicht normal angezeigt werden, die Position der Geschwisterelemente des übergeordneten Elements ist falsch usw.

Um die Auswirkungen dieser Art von Floating zu vermeiden, muss das Floating gelöscht werden. :after ist eine der Methoden.

CSS-Code:

p:before{
   content: 'Hello';
   color: red;
}
p:after{
    content: 'Tom';
    color: red;
}

3 :before und :after werden verwendet, um kleine Dreiecke zu schreiben

In unserer täglichen Arbeit stoßen wir oft auf kleine Dreiecke Kleine Symbole wie Dreiecke können durch Hinzufügen von Bildern implementiert werden, es ist jedoch bequemer, die Pseudoklasse :after :before zu verwenden.

HTML-Code:

ul:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

CSS-Code:

<div class="demo">这是一个测试</div>

Der Effekt ist wie im Bild gezeigt:

Das ist es. Ist es nicht sehr praktisch, ein kleines Dreieck hinter dem Text einzufügen?

4. Verwenden Sie :after und :before, um ein Dialogfeld zu schreiben

HTML-Code:

.demo:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid #AFABAB;
    position: relative;
    top: 2px;
    left: 10px;
}

CSS-Code:

<div class="left">
  <p>吃了吗</p>
</div>
<div class="right">
  <p>吃过了，吃了红烧排骨和酸菜鱼</p>
</div>

Der Effekt ist wie im Bild gezeigt:

Das obige Dialogfeld ist im WeChat-Stil geschrieben sehr praktisch zum Schreiben mit :before und :after

5. Schreiben Sie ein Dialogfeld mit einem Rand unten. Ein Dialog verwendet sowohl :before als auch :after

HTML Code bleibt unverändert

CSS-Code:

.left,.right{
    min-height: 40px;
    position: relative;
    display: table;
    text-align: center;
    border-radius: 7px;
    background-color: #9EEA6A;
}
.right{      /*使左右的对话框分开*/
    top: 40px;
    left: 60px;
}
.left > p,.right > p{    /*使内容居中*/
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}
.left:before,.right:after{   /*用伪类写出小三角形*/
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;
    top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{    
    border-right: 8px solid #9EEA6A;
    left: -16px;
}
.right:after{    
    border-left: 8px solid #9EEA6A;
    right: -16px;
}

Der Effekt ist wie im Bild gezeigt:

(Beim Schreiben eines Dialogfelds mit eine Grenze, ein Dreieck muss sowohl „vorher“ als auch „nachher“ verwenden)

Das obige ist der detaillierte Inhalt vonDie Funktionen und Verwendung von :after und :before in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!