1. Einführung
::before und ::after sind Pseudoelemente (in CSS3 werden Pseudoelemente zur Unterscheidung von Pseudoklassen mit doppelten Doppelpunkten geschrieben; aus Kompatibilitätsgründen werden die meisten jedoch immer noch mit einem einzelnen Doppelpunkt geschrieben , wie :first-line, :first-letter, :before, :after usw., aber die neuen in CSS3 eingeführten Pseudoelemente erlauben kein Schreiben mit einem Doppelpunkt.)
Das Pseudoelement „:before“ kann neuen Inhalt vor dem Inhalt des Elements einfügen.
Das Pseudoelement „:after“ kann nach dem Inhalt des Elements neuen Inhalt einfügen.
::before oder ::after müssen in Verbindung mit dem Content-Attribut verwendet werden. Der Inhalt muss mindestens leer sein. Die Anzeige des Pseudoelements ist standardmäßig inline und kann von Ihnen selbst geändert werden.
2. Verwendung
1. Verwenden Sie den Wert des Inhalts:
(1) Inhalt: „string“;
Sie können einige Zeichen einheitlich vor oder nach dem Wort hinzufügen
<style>
p:after{
~~删除线格式~~
content:":";
}
</style>
<body>
<p>请输入姓名</p>
<p>请输入年龄</p>
<p>请输入性别</p>
</body>
(2)Inhalt:URL(…)
Sie können vor den Wörtern einige kleine Symbole hinzufügen und die Position durch Positionierung entsprechend anpassen
<style>
p::before{
content:url(footer3.png);
position: relative;
top:17px;
}
</style>
<body>
<p>微信</p>
</body>
(3) Rufen Sie die Attribute des Elements über das Attribut attr () auf, z. B. die Anzeige des Bild-Alt-Eingabeaufforderungstexts oder der href-Adresse des Links.
Die Funktion attr() gibt den Attributwert des ausgewählten Elements zurück.
<style>
a::after{
content:"(" attr(href) ")";
}
p:after{
content:attr(class);
}
</style>
<p><a href="https://wx.qq.com/">微信</a></p>
<p class="hello"></p>
2. Implementieren Sie das Dreieck
<style>
#top-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-bottom:20px solid pink;
}
#right-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-left:20px solid pink;
}
#bottom-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-top:20px solid pink;
}
#left-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-right:20px solid pink;
}
</style>
<body>
<div id="top-triangle"></div>
<p></p>
<div id="bottom-triangle"></div>
<div id="right-triangle"></div>
<div id="left-triangle"></div>
</body>
3. Realisieren Sie den Dialogeffekt:
<style>
.left,.right{
position: relative; /*后面移动会盒子位置*/
display: table;
min-height: 40px;
text-align: center;
background-color: #9EEA6A;
margin: 0;
border-radius: 7px;
}
.left{
left:10px;
}
.left::before,.right::after{
position: absolute;
display: inline-block;
content: "";
width: 0px;
height: 0px;
border: 8px solid transparent;
top: 15px; /*移到中间*/
}
.left::before{
border-right-color: #9EEA6A;
left: -16px;
}
.right::after{
border-left-color: #9EEA6A;
right: -16px;
}
.left p,.right p{
padding:0px 10px;
}
.right{
right:-150px;
}
</style>
<div class="left">
<p>你好啊</p>
</div>
<div class="right">
<p>好久不见~</p>
</div>
4. Pfeile implementieren
<style>
.box{
position: relative;
width: 200px;
height: 50px;
background-color: pink;
}
.box::before{
position: absolute;
content:"";
width: 12px;
height: 12px;
border: 1px solid black;
border-bottom-color: transparent;
border-right-color: transparent;
transform: translate(-50%, -50%) rotate(-45deg);
left: 20px;
top: 50%;
}
</style>
<body>
<div class="box"></div>
</body>
5. Prinzip zum Löschen des Floats
: Verwenden Sie :after und :before, um zwei Elementblöcke in das Element einzufügen und den Effekt des Clearing-Floats zu erzielen.
<style>
.outer:after {
clear:both; /*清除浮动*/
content:'';
display:block; /*显示伪元素*/
width:0;
height:0; /*不占位置*/
visibility:hidden; /*允许浏览器渲染它，但是不显示出来*/
}
</style>
6. Zeichnen Sie eine Trennlinie: Zeichnen Sie eine Trennlinie
<style>
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
Originaltext https://blog.csdn.net/ladream/article/details/104828444