为什么 :before 和 :after 伪元素需要“内容"属性? [英] Why do the :before and :after pseudo-elements require a 'content' property?

问题描述

鉴于以下场景，为什么 :after 选择器需要内容属性才能起作用?

Given the following scenario, why does the :after selector require a content property to function?

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}

<div class="test"></div>

请注意，在指定 content 属性之前，您是如何看不到伪元素的:

Notice how you do not see the pseudo element until you specify the content property:

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}

<div class="test"></div>

为什么这是预期的功能?您会认为显示块会强制显示元素.奇怪的是，您实际上可以在 Web 调试器中看到样式；但是，它们不会显示在页面上.

Why is this the intended functionality? You would think that the display block would force the element to show up. Oddly enough, you can actually see the styles inside web debuggers; however, they do not display on the page.

推荐答案

您需要 content: '' 声明的原因，为每个 ::before 和/或 ::after 伪元素是因为content的初始值为normal，在none上计算为nonecode>::before 和 ::after 伪元素.请参阅规范.

The reason you need a content: '' declaration for each ::before and/or ::after pseudo-element is because the initial value of content is normal, which computes to none on the ::before and ::after pseudo-elements. See the spec.

content 的初始值不是空字符串而是计算 none 对于 ::before 和::after 伪元素，是双重的:

The reason the initial value of content isn't an empty string but a value that computes to none for the ::before and ::after pseudo-elements, is twofold:

1. 在每个元素的开头和结尾都有空的内联内容是相当愚蠢的.请记住，::before 和 ::after 伪元素的最初目的是在原始元素的主要内容之前和之后插入生成的内容.当没有要插入的内容时，创建一个额外的框只是为了插入任何内容是没有意义的.所以 none 值是用来告诉浏览器不要费心去创建一个额外的框.

1. Having empty inline content at the start and end of every element is rather silly. Remember that the original purpose of the ::before and ::after pseudo-elements is to insert generated content before and after the main content of an originating element. When there's no content to insert, creating an additional box just to insert nothing is pointless. So the none value is there to tell the browser not to bother with creating an additional box.

使用空的 ::before 和 ::after 伪元素来创建额外的框以实现布局美学的做法相对较新，一些纯粹主义者出于这个原因，甚至可能称其为黑客.

The practice of using empty ::before and ::after pseudo-elements to create additional boxes for the sole purpose of layout aesthetics is relatively new, and some purists might even go so far as to call it a hack for this reason.

在每个元素的开头和结尾都有空的内联内容意味着每个(未被替换的)元素——包括 html 和 body——在默认情况下都会生成的不是一个框，而是最多三个框(如果元素已经生成的不仅仅是主框，例如具有列表样式的元素，则生成更多个框).您实际上会使用每个元素的两个额外框中的多少个?这可能会使布局成本三倍，而收益却微乎其微.

Having empty inline content at the start and end of every element means that every (non-replaced) element — including html and body — would by default generate not one box, but up to three boxes (and more in the case of elements that already generate more than just the principal box, like elements with list styles). How many of the two extra boxes per element will you actually use? That's potentially tripling the cost of layout for very little gain.

实际上，即使在这十年中，页面上也只有不到 10% 的元素需要 ::before 和 ::after 伪元素进行布局.

Realistically, even in this decade, less than 10% of the elements on a page will ever need ::before and ::after pseudo-elements for layout.

所以这些伪元素被选择加入——因为让它们选择退出不仅浪费系统资源，而且考虑到它们的原始目的，这完全不合逻辑.性能方面的原因也是我不推荐使用 ::before, ::after 为每个元素生成伪元素的原因.

And so these pseudo-elements are made opt-in — because making them opt-out is not only a waste of system resources, but just plain illogical given their original purpose. The performance reason is also why I do not recommend generating pseudo-elements for every element using ::before, ::after.

但是您可能会问:为什么不将 ::before, ::after 上的 display 属性默认为 none ?简单:因为display的初始值不是none；它是内联.将 inline 计算为 ::before, ::after 上的 none 不是一个选项，因为那样你就永远无法内联显示它们.在 ::before, ::after 上将 display 的初始值设为 none 不是一种选择，因为一个属性只能有一个初始值.(这就是为什么 content 的初始值总是 normal 并且它被简单地定义为在 ::before 上计算为 none，::after.)

But then you might ask: why not have the display property default to none on ::before, ::after? Simple: because the initial value of display is not none; it is inline. Having inline compute to none on ::before, ::after is not an option because then you could never display them inline. Having the initial value of display be none on ::before, ::after is not an option because a property can only have one initial value. (This is why the initial value of content is always normal and it is simply defined to compute to none on ::before, ::after.)

这篇关于为什么 :before 和 :after 伪元素需要“内容"属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！