在
网站开辟中咱们常常会提到伪静态，伪元素是 CSS 中一个风趣的局部。它们许可您对设想停止良多小的调剂。可是，特别是初学者一起头能够会被它们弄胡涂。鄙人文中，咱们将为您供给 CSS 伪元素的初学者指南。咱们将诠释它们是甚么、它们若何任务和您能够利用它们做甚么。
为了诠释甚么是伪元素，最好从一个例子起头。这是一个很是简略的 HTML 页面，此中包罗一个指向款式表的链接和一个零丁的段落元素。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>CSS pseudo-element test</p>
</body>
</html>
可是，当咱们在阅读器中查抄页面时，它是如许的：CSS pseudo-element test，您能够会注重到呈现在段落后面的箭头，即便它不存在于 HTML 文档中。这是由于链接的款式表包罗以下标记：p::before {content: "→ ";}
下面是一个相称规范的 CSS 挑选器。可是，凸起的是before它后面的双冒号加号。那是咱们的伪元素。在这类环境下，它做了一件很是简略的工作，它在方针挑选器的外部 HTML 后面增加一个元素，并安排在其值中界说的内容。在这类环境下，这是一个箭头，方针元素是页面上的每一个段落元素。可是，风趣的是箭头并不呈现在 HTML 自身中。相反，您只能看到一个伪元素并且能够查抄其内容。这是阅读器开辟职员东西中的模样：
这类表现得像元素而不是元素的偏向便是伪元素得名的缘由。正如咱们将鄙人面的示例中看到的那样，它还对他们的行动有一些影响。
除上述::before元素，另外一个最风行的伪元素是::after。望文生义，它的感化与方针不异，::before只是在方针的开端建立子元素。
除这两个，另有这些元素：
::backdrop – 建立一个与用户视口一样大的框，许可您为任何转为全屏的元素（比方视频）的背景设置款式。
::cue – 您能够利用它来设置 WebVTT 提醒的款式，这象征着视频中的字幕和标题等外容。
::first-letter– 定位块级元素（比方p，h2，div）中第一行的第一个字母。这也能够象征着在::before元素外部。
::first-line– 与::first-letter块元素的全部第一行不异，但针对全部第一行。
::file-selector-button– 建立一个<input>元素的按钮type="file"。
::marker – 使您能够设置列表项标记的款式，比方名方针记列表或编号列表。
::part()– 许可您在"part="用称号标记的影子树中定位特定的 HTML 元素。Shadow-tree 元素是经由过程 JavaScript 增加的。更多信息在这里。
::placeholder– 利用它来设置外部<input>和<textarea>元素的占位符文本的款式。
::selection – 一个 CSS 伪元素，您能够利用它对用户凸起显现的文本利用款式（比方，经由过程单击并拖动光标）。
::slotted()- 方针元素标记<slot>为款式。
除此以外，阅读器还不完整撑持一些伪元素（或，在某些环境下，底子不撑持）：
::cue-region – 可是，也用于款式化字幕和标题，将它们作为一个全体而不是零丁定位。
::grammar-error– 以特定体例标记阅读器已辨认为语法毛病的文本。今朝不撑持任何阅读器。
::spelling-error– 近似于::grammar-error但拼写毛病。今朝也不撑持任何阅读器。
::target-text– 许可您设置阅读器经由过程链接跳转转动到的文本的款式。今朝阅读器撑持依然有点整齐不齐。
