Ausführliche Diskussion über die Verwendung von CSS-Pseudoelementen vorher und nachher

CSS-Pseudoelemente davor und danach sind eine Möglichkeit, Stile vor und nach HTML-Elementen hinzuzufügen. Diese beiden CSS-Pseudoelemente werden hauptsächlich verwendet, um dekorative Elemente hinzuzufügen oder dem Text zusätzliche Stile hinzuzufügen. In diesem Artikel untersuchen wir die Verwendung der CSS-Pseudoelemente vorher und nachher und stellen einige praktische Beispiele bereit.

1. Die Verwendung von CSS-Pseudoelementen davor und danach

Die Syntax lautet wie folgt:

选择器:before{ content: ""; /* 插入内容 */ 属性:属性值; }
选择器:after{ content: ""; /* 插入内容 */ 属性:属性值; }

Dabei bezieht sich der Selektor auf den Elementselektor, der dekorative Elemente einfügen muss, und davor und danach sind Pseudoelemente. In der obigen Syntax wird der Wert des Inhaltsattributs zum Einfügen von Inhalten (z. B. Text, Bildern usw.) verwendet. Darüber hinaus können Pseudoelemente davor und danach auch andere Stilattribute wie Farbe, Hintergrund, Rahmen usw. verwenden.

2. Textpräfixe und -suffixe hinzufügen

Eine der häufigsten Verwendungen von CSS-Pseudoelementen davor und danach ist das Hinzufügen von Präfixen und Suffixen zu Text. Beispielsweise können wir das Pseudoelement before verwenden, um ein kleines Symbol vor dem Text zu platzieren, wie unten gezeigt:

HTML-Code:

<p>下面是一些列表项：</p>
<ul>
  <li>CSS</li>
  <li>HTML</li>
  <li>JavaScript</li>
</ul>

CSS-Code:

li:before{
  content: url('icon.png');
  margin-right: 5px;
}

Auf diese Weise können wir ein kleines Symbol davor einfügen des Listenelements.

Sie können das Pseudoelement danach auch verwenden, um Inhalte hinter dem Text hinzuzufügen. Zum Beispiel können wir das Symbol „/“ zu jeder Tabellenzelle in der HTML-Tabelle hinzufügen. Der Code lautet wie folgt:

HTML-Code:

<table>
  <tr>
    <td>苹果</td>
    <td>橘子</td>
    <td>香蕉</td>
  </tr>
</table>

CSS-Code:

td:after{
  content: "/";
  margin-left: 5px;
}

3 Erstellen Sie einen Schieberegler

CSS-Pseudo- Elemente vor und nach Kann auch zum Erstellen von Schiebereglern verwendet werden. Zum Beispiel können wir einen Schieberegler mit Schiebeanimation erstellen. Der Code lautet wie folgt:

HTML-Code:

<button class="slider">Slide to Unlock</button>

CSS-Code:

.slider{
  width: 200px;
  height: 50px;
  border: none;
  background-color: #0084FF;
  color: #FFF;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 1.2em;
}
.slider:before{
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #FFF;
  top: 0;
  left: -5px;
  border-radius: 50%;
  transform: translateX(-100%) rotate(45deg);
  animation: slider 1s infinite;
}
@keyframes slider{
  0%{
    transform: translateX(-100%) rotate(45deg);
  }
  50%{
    transform: translateX(100%) rotate(45deg);
  }
  100%{
    transform: translateX(-100%) rotate(45deg);
  }
}

4. Erstellen Sie einen Eselsohr-Effekt

Eine weitere häufige Verwendung von CSS-Pseudo- Elemente vorher und nachher Der beste Weg ist, einen Faseneffekt zu erzeugen. Beispielsweise können wir im Homepage-Titel der Website die Pseudoelemente davor und danach verwenden, um einen Eselsohr-Effekt zu erzeugen. Der Code lautet wie folgt:

HTML-Code:

<h1>Welcome to My Website</h1>

CSS-Code:

h1{
  position: relative;
  text-align: center;
  color: #FFF;
  background-color: #0084FF;
  padding: 20px;
  margin: 0;
}
h1:before, h1:after{
  content: "";
  position: absolute;
  bottom: -20px;
  border: 20px solid transparent;
}
h1:before{
  border-top-color: #0084FF;
  left: 0;
}
h1:after{
  border-top-color: #0084FF;
  right: 0;
}

Das Obige Es gibt mehrere Verwendungsmöglichkeiten von CSS-Pseudoelementen davor und danach. Unabhängig davon, ob Sie dem Text Präfixe und Suffixe hinzufügen, Schieberegler erstellen oder einen Eselsohreffekt erzeugen, können die CSS-Pseudoelemente davor und danach einige neue visuelle Elemente zu Ihrer Website hinzufügen. Auf diese Weise können Sie den Stil und das Layout ändern, ohne HTML-Code hinzuzufügen, und so Ihre Website optisch ansprechender gestalten.

Das obige ist der detaillierte Inhalt vonAusführliche Diskussion über die Verwendung von CSS-Pseudoelementen vorher und nachher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!