了解伪元素：before和：after

最新推荐文章于 2024-07-11 21:11:19 发布

cune1359

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量711

点赞数

文章标签： css html python js css3 ViewUI

级联样式表（ CSS ）主要用于将样式应用于HTML标记，但是在某些情况下，当向文档中添加额外的标记是多余或不可能时，CSS中实际上存在一项功能，使我们可以在不中断的情况下添加额外的标记实际文档，即伪元素 。

您已经听说过这个词，尤其是在您遵循我们的一些教程时。

实际上，有一些CSS系列成员被归类为伪元素，例如:first-line ， :first-letter ， ::selection ， :before和:after 。但是，对于本文，我们将覆盖范围仅限于:before和:after ，此处的“伪元素”将专门引用它们。我们将从基础上研究这个特定主题。

语法和浏览器支持

伪元素实际上从CSS1开始就出现了 ，但是我们在这里讨论的:before和:after在CSS2.1中发布了。最初， 伪元素使用单冒号作为语法，然后随着网络的发展，在CSS3中， 伪元素被修改为使用双冒号-变为::before和::after以将其与伪代码区分开。类（即:hover ， :active等）。

但是，无论您使用单冒号还是双冒号格式，浏览器都仍然可以识别。并且由于Internet Explorer 8仅支持单冒号格式，因此如果您希望更广泛的浏览器兼容性，则使用单冒号更为安全。

它有什么作用？

简而言之， 伪元素将在内容的元素之前或之后插入一个额外的元素，因此当我们将它们都添加时，它们在技术上是相等的，并带有以下标记。

<p>
<span>:before</span> 
	This the main content. 
<span>:after</span>
</p>

但是这些元素实际上不是在文档上生成的。它们在表面上仍然可见，但是您不会在文档源上找到它们，因此实际上说它们是伪元素。

使用伪元素

使用伪元素相对容易。下面的语法selector:before将在内容selector:before添加一个元素，而此语法selector:after将在内容选择selector:after添加一个元素，并在其中添加内容，我们可以使用content属性。

例如，下面的代码段将在blockquote之前和之后添加一个引号。

blockquote:before {
	content: open-quote;
}
blockquote:after {
	content: close-quote;
}

样式化伪元素

尽管是伪元素，但伪元素实际上的作用类似于“真实”元素。我们可以在其上添加任何样式声明，例如更改颜色，添加背景，调整字体大小，对齐其中的文本等。

blockquote:before {
	content: open-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: left;
	position: relative;
	top: 30px;

}
blockquote:after {
	content: close-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: right;
	position: relative;
	bottom: 40px;
}

指定尺寸

默认情况下，生成的元素是inline-level元素，因此，当我们要指定高度和宽度时，必须首先使用display: block声明将其定义为block元素。

blockquote:before {
	content: open-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: left;
	position: relative;
	top: 30px;
	border-radius: 25px;

	/** define it as a block element **/
	display: block;
	height: 25px;
	width: 25px;
}
blockquote:after {
	content: close-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: right;
	position: relative;
	bottom: 40px;
	border-radius: 25px;

	/** define it as a block element **/
	display: block;
	height: 25px;
	width: 25px;
}

附加背景图片

我们还可以用图像而不是纯文本替换内容。尽管content属性提供了一个url()字符串来插入图像，但是在大多数情况下，我还是更喜欢使用background属性对附加的图像进行更多控制。

blockquote:before {
	content: " ";
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	float: left;
	position: relative;
	top: 30px;
	border-radius: 25px;

	background: url(images/quotationmark.png) -3px -3px #ddd;

	display: block;
	height: 25px;
	width: 25px;
}
blockquote:after {
	content: " ";
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	float: right;
	position: relative;
	bottom: 40px;
	border-radius: 25px;

	background: url(images/quotationmark.png) -1px -32px #ddd;

	display: block;
	height: 25px;
	width: 25px;
}

但是，从上面的代码段中可以看到，我们仍在声明content属性，这次是使用空字符串。 content属性是一项要求 ，应始终应用；否则， 伪元素 将无法工作 。

与伪类结合

尽管它们是另一种伪类，但是我们可以在一个CSS规则中将伪类与伪元素一起使用，例如，当我们将鼠标悬停在blockquote时，想要将引号背景变暗。

blockquote:hover:after, blockquote:hover:before {
	background-color: #555;
}

添加过渡效果

我们甚至可以在其上应用transition属性，以创建优美的颜色过渡效果。

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

但是不幸的是，过渡效果似乎仅在最新版本的Firefox中有效。希望将来会有更多的浏览器赶上来，以便将transition属性应用于伪元素中。

结论

实际上，当前正在处理的伪元素已有一些改进，例如嵌套伪元素 div::before::before { content: ''; } div::before::before { content: ''; }和多个伪元素 div::before(3) { content: ''; } div::before(3) { content: ''; }这显然会在未来的网页设计实践中打开更多的可能性。当它们在当前的浏览器中实现时，让我们耐心等待。