Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2018-09-12 16:24:25
Original
5351 Leute haben es durchsucht

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>
Nach dem Login kopieren

Der Effekt ist wie folgt:

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

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: &#39;Hello&#39;;
   color: red;
}
p:after{
    content: &#39;Tom&#39;;
    color: red;
}
Nach dem Login kopieren

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: &#39;&#39;;
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
Nach dem Login kopieren

CSS-Code:

<div class="demo">这是一个测试</div>
Nach dem Login kopieren

Der Effekt ist wie im Bild gezeigt:

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

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: &#39;&#39;;
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid #AFABAB;
    position: relative;
    top: 2px;
    left: 10px;
}
Nach dem Login kopieren

CSS-Code:

<div class="left">
  <p>吃了吗</p>
</div>
<div class="right">
  <p>吃过了,吃了红烧排骨和酸菜鱼</p>
</div>
Nach dem Login kopieren

Der Effekt ist wie im Bild gezeigt:

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

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: &#39;&#39;;
    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;
}
Nach dem Login kopieren

Der Effekt ist wie im Bild gezeigt:

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

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

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage