Gründe für die Verwendung des i-Tags als kleines Symbol

:before- und :after-Pseudoelemente sind sehr einfach zu codieren (wie die meisten CSS-Eigenschaften benötigen Sie nicht viele Präfixe). Hier ist ein einfaches Beispiel.

#example:before {  content: "#";}#example:after {  content: ".";}	

.

In diesem Beispiel wird das Element mit dem id-Attribut mit einem „Hash-Symbol“ vor dem Inhalt und einem „Punkt“ nach dem Inhalt versehen. Syntaxhinweise

Sie können den

und ihn einfach als Box mit wenig Inhalt behandeln. So:

Sie können das Inhaltsattribut jedoch nicht vollständig entfernen

#example:before {  content: "";
  display: block;  width: 100px;  height: 100px;}	

. Die Content-Eigenschaft erfordert mindestens einen Nullverweis als Wert (d. h. :content:""). Vielleicht fällt Ihnen auf, dass Sie Pseudoelemente auch mit zwei Doppelpunkten (::before und ::after) schreiben können, was ich bereits besprochen habe. Die kurze Erklärung ist, dass es keinen Unterschied zwischen den beiden Syntaxen gibt. Der einzige Unterschied besteht darin, dass das Pseudoelement (doppelter Doppelpunkt) und die Pseudoklasse in CSS3 (einzelner Doppelpunkt) sind. Schließlich in Bezug auf Syntax. Technisch gesehen können Sie Pseudoelemente allgemein und nicht auf bestimmte Elemente anwenden, wie folgt:

:before {  content: "#";}	

Wie bereits erwähnt,

Außerdem sind eingefügte Elemente standardmäßig Inline-Elemente (oder in HTML5 in der Kategorie Textsemantik). Um einem eingefügten Element Höhe, Abstand, Ränder usw. zu geben, müssen Sie es daher normalerweise explizit als Element auf Blockebene definieren.

Dies wird eine kurze Erklärung sein, wie man Pseudoelemente entwirft. Sehen Sie sich dieses Bild meines Editors unter dem Text an

Beachten Sie außerdem, dass die typischen

für eingefügte Elemente gelten. Wenn Sie beispielsweise die Schriftfamilien Helvetica, Arial und Sans Serif auf das Body-Element angewendet haben, erbt das Pseudoelement diese Schriftfamilien wie jedes andere Element.

In ähnlicher Weise erben Pseudoelemente keine Stile, die nicht auf natürliche Weise vom übergeordneten Element geerbt werden (z. B. Abstand und Ränder). Was kommt davor oder danach?

Ihre Intuition ist, dass die Pseudoelemente :before und :after vor oder nach dem Zielelement

eingefügte Inhalt ist das untergeordnete Element des zugehörigen

, auf den content verweist, wird darin platziert das -Kind Das „Vorher“- oder „Nachher“-Element . Um dies zu demonstrieren, schauen Sie sich den folgenden Code an. Zuerst in HTML: Das Folgende ist das CSS zum Einfügen von Pseudoelementen:

<p class="box">Other content.</p>	

然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中查看的结果：

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。

插入非文本内容

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {  content: url(image.jpg);}	

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。

你还可以选择attr(X)中的函数的形式。此功能，根据规范 ，“把X属性的值以字符串的形式返回”

下面是一个例子：

a:after {  content: attr(href);}	

attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。