So verwenden Sie vor und nach Pseudo-Elementen in CSS

| Von

CSS-Code

Pseudoelemente sind einer der erweiterten Selektoren, die für die Verwendung in CSS verfügbar sind. Der Hauptzweck dieser Selektoren besteht darin, ein eindeutiges Design zu erstellen, ohne das HTML-Papier zu ändern, das verwendet wird, um die Standardstruktur einer angebotenen Website zu entwickeln.

Im Folgenden erfahren Sie, wie Sie Pseudoelemente in CSS verwenden.

Typische Pseudo-Elemente

Es gibt eine umfangreiche Checkliste von Pseudo-Elementen, die leicht verfügbar sind, um das Leben eines Webdesigners zu erleichtern. Einige dieser Pseudoelemente bestehen aus:

  • Vor
  • Nach dem
  • Hintergrund
  • Erste Linie
  • Erster Brief

In bestimmten Szenarien werden einige Pseudoelemente sicherlich besser sein als andere, aber etwas, das konstant bleibt, ist das Grundgerüst für die Verwendung jedes Pseudoelements.

Beispiel für eine Pseudo-Element-Struktur


selector::pseudo-element{
/* css code */
}

Obwohl Sie einen HTML-Aspekt als Selektor verwenden können, wird empfohlen, eine Klasse oder eine ID zu verwenden, um zu verhindern, dass unbeabsichtigte Komponenten in Ihrem Format als Ziel verwendet werden. Der Aspekt, das Design oder die Informationen, die Sie an der gewünschten Position platzieren möchten, müssen zwischen den geschweiften Klammern positioniert werden.

Die Pseudo-Elemente vor und nach werden in der Liste am meisten bevorzugt, und auch angesichts der Tatsache, dass es zahlreiche sinnvolle Methoden gibt, sie zu verwenden – es ist nicht schwer zu verstehen, warum.

Verwenden des Vor-Pseudo-Elements in CSS

Obwohl es möglich ist, ist es schwierig, Bilder mit lesbarem Text in CSS zu überlagern. Dies liegt vor allem daran, dass das Bild und auch die Nachricht auf einer Seite genau die gleiche Einstellung einnehmen würden.

Es ist relativ einfach, ein Bild an den Verlauf einer Textgruppe zu senden, aber wenn dieses Foto auch brillant ist, verwirrt es die Botschaft, die darüber kommt. In diesen Fällen besteht die folgende Aktion darin, zu versuchen, das Bild unter Verwendung des Opazitätsaufbaus viel weniger undurchsichtiger zu machen.

Das einzige Problem ist, dass die Nachricht am Ende auch ziemlich transparent ist, da das Bild und auch der Text die gleiche Einstellung einnehmen.

Eine der wenigen effektiven Möglichkeiten, dieses Problem zu beheben, ist die Verwendung des Vor-Pseudoelements.

Verwenden des Vor-Pseudo-Element-Beispiels


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Der Code over wird erstellt, um zusammen mit der HTML-LandingPage-Klasse unten verwendet zu werden. Wie im obigen Code erhalten, können wir durch die Verwendung des vorherigen Pseudo-Elements das Bild gezielt ansprechen und die opacity-Eigenschaft darauf verwenden, bevor das Bild in den Text integriert wird.


<div >
<h1>Using the Before pseudo-element</h1>
<p>
This is the result of using the before pseudo-element
to overlay and image with readable text.
</p>
</div>

Dies führt sicherlich dazu, dass ein Overlay auf dem Bild positioniert wird und darüber hinaus Klartext angezeigt wird, wie in dem unten aufgeführten Bild angezeigt:

Verwendung des Vor-Pseudo-Elements in CSS

Verwenden des After-Pseudo-Elements in CSS

Eine nützliche Verwendung für das After-Pseudoelement besteht darin, bei der Entwicklung einer HTML-Art zu helfen. Die meisten Arten werden mit einer Reihe von Bereichen erstellt, die Daten benötigen, damit der Typ erfolgreich gesendet werden kann.

Eine Methode, um vorzuschlagen, dass ein Feld in einer Art Daten aufruft, besteht darin, ein Sternchen nach der Bezeichnung für dieses Feld zu platzieren. Das Pseudo-Element nach bietet Ihnen hierfür eine funktionale Methode.

Verwenden des After-Pseudo-Element-Beispiels


.required::after{
content: '*';
color: red;
}

Das Einfügen des Codes in den CSS-Abschnitt Ihrer Art garantiert, dass jedem Tag, der den aufgerufenen Kurs enthält, direkt ein rotes Sternchen folgt. Das Pseudo-Element after ist in diesem Beispiel auch praktisch, da es hilft, das Styling von der Struktur zu trennen (was in der Softwareentwicklung immer perfekt ist).

Die Content-Eigenschaft

Wie in der Nach-Pseudo-Element-Instanz over gezeigt, ist der Web-Content-Wohneigentum das Gerät, mit dem brandneue Inhalte auf einer Seite platziert werden. Diese Wohn- oder Gewerbeimmobilie wird nur mit den in der Vergangenheit und auch nach Pseudo-Elementen genutzt.

Es ist zu beachten, dass Sie auch dann, wenn kein Material zur Einspeisung in das materielle Wohn- oder Gewerbeobjekt angeboten wird (wie im obigen Pseudo-Element-Beispiel oben), Sie dennoch verpflichtet sind, den Webinhalt home . zu nutzen innerhalb der Kriterien des in der Vergangenheit oder nach dem Pseudo-Element, um sie wie beabsichtigt zu arbeiten.

Jetzt können Sie Pseudo-Elemente in CSS verwenden

In diesem kurzen Artikel haben Sie genau erfahren, wie Sie Pseudo-Elemente in Ihren CSS-Programmen erkennen und verwenden. Ihnen wurden die in der Vergangenheit und danach Pseudo-Elemente vorgestellt und praktische Mittel geboten, um beides zu nutzen. Sie konnten auch sehen, warum der Webinhalt home für die effektive Nutzung der in der Vergangenheit sowie nach Pseudo-Elementen benötigt wird.

Im Folgenden erfahren Sie genau, wie Sie Pseudoelemente in CSS verwenden. In bestimmten Szenarien werden sich sicherlich einige Pseudoelemente als geeigneter erweisen als andere, aber der einzige Punkt, der weiterhin kontinuierlich ist, ist die Grundstruktur für die Verwendung jeglicher Art von Pseudoelementen. Die Pseudo-Elemente vor und nach werden in der Auflistung am meisten bevorzugt und vorausgesetzt, es gibt mehrere funktionale Möglichkeiten, sie zu verwenden – es ist nicht schwer zu verstehen, warum. Eine der wenigen effektiven Methoden, dieses Problem anzugehen, ist die Verwendung des Pseudo-Elements in der Vergangenheit. Es ist wichtig zu beachten, dass Sie auch dann, wenn kein Material für die Einspeisung in den Webinhalt Wohneigentum verfügbar ist (wie im obigen Beispiel für Pseudoelemente in der Vergangenheit), dennoch verpflichtet sind, das Material Wohneigentum zu verwenden innerhalb der Spezifikationen des vorher oder nachher-Pseudoelementes, damit sie wie beabsichtigt funktionieren.

Klicken Sie, um diesen Beitrag zu bewerten!
[Gesamt: 0 Durchschnitt: 0]

Andere verwandte Artikel

Schreibe einen Kommentar