Ich habe mir ein paar Twitter-Bootstrap-Templates angesehen und ich habe gesehen, dass eine Menge ::before und ::after vor und nach div tags eingefügt wurden.
Kann mir jemand sagen, was sie sind?
Sie repräsentieren Pseudo-Elemente, die Sie nicht direkt in Ihr Markup einfügen, aber Ihnen zur Verfügung stehen, um einige nette Effekte mit CSS zu erstellen. Sie haben ::before und ::after erwähnt und sie repräsentieren Pseudo-Elemente, die schockierend vor und nach Ihren Elementen erscheinen.
Die gesamte Liste ist unten enthalten und sollte ziemlich selbsterklärend sein:
%Vor%Hinweis: Ссылка
Beachten Sie die Verwendung des doppelten Doppelpunkts, der mit der Spezifikation übereinstimmt. Manchmal werden Pseudo-Elemente mit einem einzelnen Doppelpunkt angezeigt, aber das liegt nur daran, dass wir Browser unterstützen mussten, die die Doppelpunkt-Syntax nicht verstanden haben.
Die Pseudoelemente ::before und ::after sind für css und sind in keiner Weise Bootstrap-spezifisch.
Ein kurzes Beispiel für einige der Dinge, die es tun kann, ist dies:
Angenommen, Sie haben ein elementares p-Element:
%Vor%In deinem CSS, wenn du das hättest:
%Vor% Das p -Tag in html würde jetzt sagen:
Wenn es
war %Vor%Es wäre:
%Vor%Dies kann sehr nützlich sein, wenn Sie es mit Dingen wie Telefonnummern oder E-Mail-Adressen verwenden, z. B.
%Vor% <p class='phone_number'> hätte jetzt Phone #: davor.
Sie können sehr viele Dinge tun, sogar für das Styling.
Wenn Sie sich die Formen von CSS ansehen, werden Sie sehen, dass es bei komplexeren Formen verwendet wird.
Eine Sache, die ::before und ::after gemeinsam haben und funktionieren MÜSSEN, ist das Attribut content . Wenn es kein Inhaltsattribut hat, wird es nicht angezeigt. Verwechsle das nicht mit einem leeren content , da dies funktionieren wird, vorausgesetzt du gibst ihm eine Höhe / Breite wie jedes andere Element.
::before und ::after sind jedoch nicht die einzigen Pseudo-Elemente, hier ist eine Liste:
Sie können diese Elemente auch verdoppeln:
Zum Beispiel:
%Vor%