Question

我使用了CSS伪元素选择器，就像其他许多人一样，主要是说我已经使用过它们了。

但是我绞尽脑汁，努力想出一个与标记并列的理由。

采用以下示例：

    <p>Hello</p>

    p:after {
       content: "*";
    }

现在，使用此<span>标记比使用它有什么好处？

我错过了:before和:after的观点吗？是否有一些坚实的理由将它们用于预先存在的语义标记？

Answer 1

The CSS2.1 spec说明生成的内容：

在某些情况下，作者可能希望用户代理呈现不是来自document tree的内容。一个熟悉的例子是编号列表;作者不希望明确列出数字，他或她希望用户代理自动生成它们。类似地，作者可能希望用户代理在图的标题之前插入单词“Figure”，或者在第七章标题之前插入“Chapter 7”。特别是对于音频或盲文，用户代理应该能够插入这些字符串。

基本上，目的是通过“内容”来最小化内容结构的污染，否则“内容”更适合作为表示元素，或者更好地实现自动化。

Answer 2

我认为:before和:after在CSS2中，但除了迂腐之外，这些特殊的伪元素旨在添加实际上只是视觉辅助的“内容”。

主要的例子是在<q>元素周围添加引号，Firefox在其默认样式表中使用这些选择器。有些人也用它们来清理花车。

尽管有CSS content属性的名称，但不应将它们用于实际内容，因为非可视用户代理（即屏幕阅读器）应忽略它们。

我从来没有对它们有太多的用处，虽然我曾经使用它们在个人网站上添加小的unicode图标来悬挂链接 - 就像你一样，只是说我已经用过了它们。

Answer 3

如果您正在谈论:before和:after：它们被用作表示元素，用于在实际文档中添加更多元素的情况下，将结构与外观混合。我见过的一些案例：

项目符号列表中的项目符号
引用q元素
时尚阴影
装饰品及文字的开头或结尾

Answer 4

CSS3伪选择器还包括基本的选项，如：link，：hover，：active，：focus，：first-child，：nth-child。如果没有大部分内容，就不可能建立一个有用的网站。

对于不太常用的伪选择器，例如：after和：before，它们在某些情况下非常有用，在这些情况下，内容是动态生成的，并且您希望在特定元素或标记之前插入某些内容。

Answer 5

老实说，唯一有价值的用途是强制元素在dom中具有正确的大小。使用此代码例如：

<div class="container">
    <div>this div is floated left</div>
    <div>this div is floated left</div>
</div>

通常，您必须为.container div指定精确或最小高度。如果您使用一些非常简单的CSS来应用“：after”，那么您应用于.container的任何背景实际上都会显示（几乎在每个浏览器中），几乎没有垫片。

.container:after{
    content:'.';
    height:0;
    line-height:0;
    display:block;
    float:left;
    visibility:hidden;
}

现在尝试该示例，应用背景颜色或图像，您将看到.container div始终具有适当的高度（这将是内部内容的总组合高度），即使所有内部html都是浮动（大多数ul / li css按钮的情况）。

我还在每个div上使用了after，我在每个html页面中包含了所有内容。这是因为给定页面上的所有内容都可能浮动，我想确保我的内容div总是具有正确的大小/填充和适当的背景。

有什么意义：在CSS之前和之后的伪元素选择器？

5 个答案: