多个伪元素的用例 | CSS-Tricks

我曾经做过一个关于伪元素的完整演讲演讲。我提到的一件事是，曾经有一个 CSS3 规范包含“多个”伪元素，但后来被去掉了。这有点令人沮丧，因为有时仅仅使用 ::before 和 ::after 不够。为什么会有这种看似随意的限制？

现在，Adobe 的 Alan Stearns 正在为 CSSWG 领导一个新的草案，旨在将此功能添加回规范（并使其在浏览器中工作）。他需要一些帮助！他需要一些视觉用例来说明设计师为什么想要这个功能。

我立即想到的一个例子是气泡箭头。气泡箭头可以用伪元素制作，但如果需要将这些伪元素用于其他用途怎么办？例如，一个块引用可能在其周围有开始和结束引号。

或者，如果可能在内部存在浮动元素，则可能需要在其上使用 clearfix。clearfix（通常）在元素上使用两个可用的伪元素。

在更大范围内，浏览一下 CodePen。有很多很棒的例子，比如这个带射击坦克的例子。许多样式演示都是由每个部分的一组大型 HTML 元素构建的。为什么要用用于非语义目的的语义元素污染 DOM？所有这些都可以用伪元素来完成。

所以让我们来听听大家的意见！**您在哪些用例中需要多个伪元素但却没有？**帮助 Alan 完成这项工作有助于推动网络发展。

Alan Stearns

# 2012年7月27日

我正在考虑的几个想法

更多额外的背景和边框，类似于 Nicolas Gallagher 的方法。

多个样式表添加 ::before 和 ::after 内容，而不会相互覆盖。

在 CSS 中生成框，用于区域链。

William Malo

# 2012年7月27日

拥有更多 :before 和 :after 伪元素有时很有用，但真正令人惊叹的是一个包装器伪元素。它允许像“uncle dave’s box”这样的技巧用一个元素而不是两个（有时甚至三个）来完成。

Reinier Kaper

# 2012年7月27日

块引用应该包含段落，因此您可以为引号定位第一个和最后一个段落，并且仍然可以在块引用上使用伪元素 ;-)

但我认为如果可以像这样链接伪元素会很好
.some-class:before:before

尽管我想这可能会有点混乱 ;-)

William Malo

# 2012年7月27日

还可以允许复杂的 CSS 动画，而无需 100 个 div。

这对从事 CSS 工作但无法修改 HTML 的人来说非常有用。

我个人有 1/2 的网站中包含非语义的 div……而且我认为所有网站都包含多余的标签，例如 li 标签内的链接，或文章内的 p……

有时这会让我有点烦恼。

Alex Kempton

# 2012年7月27日

我一直想知道这个问题。也许像这样设置会起作用？这似乎是一个好方法，因为多个元素可以调用相同的预定义伪元素。


@pseudo-element nameOfElement {
//css properties here
}

@pseudo-element otherElement {
//css properties here
}

.element {
pseudo-before: "nameOfElement, otherElement";
pseudo-after: "otherElement";
}

Charlotte

评论永久链接# 2012年7月28日
这看起来像一个非常成熟的解决方案，我绝对可以与之配合使用。它比链接伪元素（顺便说一句，您会完全混淆 ::before::after 和 ::after::before）或创建 ::more 更具可扩展性。它也符合您通过嵌入伪元素（就像我们现在一样）获得的 sass 语法。
```
@mixin pseudo-before {
// css
}
@mixin pseudo-after {
// other css
}
.element {
&::before  {@include psuedo-before;}
&::after {@include psuedo-after;}
}
```

Ryan

# 2012年7月27日

我已经可以想象支持线程了：“不，::after 在 ::after::after 之前，::before::before 在 ::before 之前……而不是之后！”

Gray Ghost Visuals

# 2012年7月27日

奇怪的是，我今天在摆弄一个圆圈，它使用 :before 和 :after 做了一些折叠面板的事情，我当时想……

“我想添加更多面板，但我只有一个 :before 伪元素和一个 :after 伪元素，我需要额外的伪元素才能有更多面板来翻阅。啊！糟糕！”

伪元素示例
http://codepen.io/grayghostvisuals/full/EneAo

Salman Abbas

# 2012年7月27日

如果这能添加到规范中那就太棒了。

另外，对于“替换元素”，如何使用 ::outer-before 和 ::outer-after。

Josh

# 2012年7月27日

我希望能够使用单个元素制作一个 3D 立方体。我已经能够创建非常接近的东西（http://codepen.io/joshnh/pen/FCJGI），但旋转是有限的，因为它实际上只有前三个面板！

Corey

# 2012年7月27日

更有意义的是

div::before {} /* Same as ::before(1), but applies also to all subsequent ::before's
div::before(2) {}
div::after(1) {}
div::after(2) {}
div::after(3) {}

Geoff Thibeau

评论永久链接# 2012年7月27日

我想扩展 Corey 的方法，使其行为类似于 :nth-child 选择器。
例如，::before(2)，::before(2n+1)

不确定如何指定存在多少个。也许作为属性？
element{ margin:0; before:6; after:2; }

但通过这种方式，您可以为 CSS 打开各种可能性，以替换图像和/或额外元素。
cnwtx

评论永久链接# 2012年7月27日

这正是我想说的！甚至包含类似 ::before(even) 或 ::before(-1) 的内容来指定偶数/奇数和从末尾倒数，甚至类似于 :first-line::after(2) 的内容。

James

# 2012年7月27日

我想在规范中看到一个伪元素 :bad-ass。我不在乎它做什么，我只想在规范中看到它。

Ryan Wheale

# 2012年7月27日

我经常遇到的一个用例是带边框的框和带边框的箭头……这是通过在稍大的 :before 箭头之上放置一个较小的 :after 箭头来实现的，以呈现边框的外观。但是，这会占用两个伪元素。

我已经习惯了在构建 DOM 时意识到这些情况，并为我所有其他潜在的伪元素需求预先编写一个内部包装元素。我知道它不完全是语义化的……但对我来说，一致性和未来的灵活性胜过语义 :(。

Nimsrules

# 2012年7月27日

我喜欢你介绍新内容的方式，Chris。在为块引用和图示导航设置样式时，使用这些伪类。

Hugo

# 2012年7月28日

那是我的坦克！但我必须同意，我不得不使用许多元素来实现这样的目的，这很糟糕。

实际上，我到了一个地步，当我使用两个以上的元素时，我甚至不花时间考虑如何使用伪元素来减少 DOM 中的元素数量。这并不值得，或者至少在 CodePen 演示中不值得。

很久以前我就想使用多个伪元素来构建一些绝对非语义的东西（例如，一个在屏幕上穿梭的射击坦克）。类似于 #element:before:after:before:before……或者更好的 #element:pseudo(N)。

Shaun Lynn

评论永久链接# 2012年7月30日

我真的很喜欢你将 ::after 和 ::before 组合成单个伪元素（如 ::pseudo(x)）的想法。我认为“before”和“after”名称由于其现实世界的关联而充当了任意的语义限制。如果物理对象通常只有一个背面和正面，那么更难以论证您需要多个伪元素的情况。当前的规范无意中将一个有缺陷的类比应用于 HTML 元素。

Classicweb

# 2012年7月28日

Taufik Nurrohman

# 2012年7月28日

使用一个锚元素制作网站徽标：<a id="logo" href="/">My Site!</a>
不过，我想有一件事是我想要的。即使我们无法创建多个伪元素，但我至少希望它们可以与原始元素进行比较：可选择和可过渡（在 Firefox 中也可过渡）:\

Benjamin

# 2012年7月28日

您可以制作一个无需额外标记的图像悬停效果（a.img-sprite-hover-fade:hover:after）

http://jsfiddle.net/mbDAF/

遗憾的是，CSS 过渡在当前浏览器版本中无法在生成的內容上工作。

Stefan

# 2012年7月28日

嗯，这看起来像是对 CSS 规范的一个非常不错的补充，但我不明白的是，您要求我们提供示例，让 W3C 工作组考虑这个规范。

如果这是一个非常需要的 CSS 规范，为什么你需要向我们索要示例？如果人们真的想使用它们，肯定会有很多示例，但他们做不到。

当然，它们将不可见，因为这些伪类目前不可用，但如果它们真的被需要，你甚至都不需要询问，因为示例就在那里。

回到文章本身，这个规范看起来非常酷。我真的很喜欢 @corey 的方法（就像你在演示文稿中提到的那样）。我喜欢 Nicolas 使用伪类构建 GUI 元素的方式（http://nicolasgallagher.com/pure-css-gui-icons/）。

伪类对于为元素添加非常漂亮的阴影也很有用。（http://jsfiddle.net/savver/wXKbc/embedded/result/）。

Ryan

# 2012年7月28日

这确实很有道理，尤其是在纯 CSS 的视觉内容中。我总觉得为了规避伪 CSS 的限制，我在 DOM 中添加了毫无意义的内容……尤其是在显示一些没有交互作用的简单视觉素材时。

我完全支持 Corey（多个 before/after 选择器的索引号）和 Alex Kempton（多个预定义的自定义命名 before/after 选择器）提出的想法。

Alex 的方法似乎最合适，考虑到 CSS 标准中已经存在使用自定义名称的东西，例如 CSS 动画，这很有道理。

这里还有一点它将很有用。
一个带有引号的语音气泡，箭头，以及如果消息被固定（或收藏、流行、重要等），则位于顶角的静态图标。

这样，人们只需使用此 HTML


<p class="pinned">
This is a great idea, it makes my brain and DOM happy!
</p>

结合此 CSS


#messages p:before(1)
{ /* Speech bubble arrow styling */ }
#messages p:before(2)
{ /* Speech bubble open quote */ }

#messages p:after(1)
{ /* Speech bubble closing quote */ }
#messages p.pinned:after(2)
{ /* 'pinned' icon over top-right of bubble corner */ }

或 Alex 提到的另一种 CSS 方法


@pseudo msg-pin 
{ //css properties }
@pseudo msg-arrow
{ //css properties }
@pseudo msg-left-quote 
{ //css properties }
@pseudo msg-right-quote
{ //css properties }

#messages p
{
before: msg-arrow, msg-left-quote;
after: msg-right-quote;
}
#messages p.pinned
{
after: msg-pin;
}

而不是在 DOM 中添加更多内容，例如...

Gray Ghost Visuals

评论永久链接# 2012年7月28日
我真的很喜欢索引示例。非常有道理，我甚至觉得我实际上正在使用类似于多个 background-images 和 :nth-child 属性的东西。
```
/*based on the :nth-child() indexing*/
:before(even)
:before(1n+2)

:after(odd)
:after(1n+2)
```
我仍然不明白这里发生的这个双冒号是怎么回事？这是什么？
```
::before
::after
```
Shaun Lynn

评论永久链接# 2012年7月30日

尽管不是必需的，但规范指出双冒号是表示伪元素的“正确”方式。

Wander

# 2012年7月28日

如果存在 ::inbetween，选择选定元素子元素之间的空间，那将很有趣。

ul::inbetween{ content: ‘|’ ; }
将列表转换为
<ul><li>…</li>|<li>…</li>|<li>…</li></ul>

当然，除了使用 content 之外，还可以创建小的块、图像等，用作一组元素（文章、菜单项、表单元素等）之间的分隔符。

shaun kardinal

# 2012年7月28日

也许是 ::content-before/after 和 ::display-before/after 的两种不同功能，只是为了分离上面引文示例中的一些简单内容。

Aaron Kahlhamer

# 2012年7月28日

嗯……演示一下 http://codepen.io/aaronkahlhamer/pen/dnLfF（仅供参考：样式不完美。）

我想如果我有多个伪元素，我就可以做到这一点。

Name: Edit

Aaron Kahlhamer

# 2012年7月28日

嗯……演示一下 http://codepen.io/aaronkahlhamer/pen/dnLfF（仅供参考：样式不完美。）

我想如果我有多个伪元素，我就可以做到这一点。

Nicolas Gallagher

# 2012年7月28日

我认为一些用例最终将由 Web Components 处理……但可能并非所有用例。

Eric

# 2012年7月28日

像这样怎么样


#element::before[id="before-element"] {}
#element::after[id="after-element"] {}
#before-element::before {}
#after-element::after {}

在这种情况下，我们将一个特定的 ID（或 CLASS，如果你愿意）分配给初始伪元素。然后，您可以为原始伪元素分配一个新的伪元素。

从技术上讲，使用这种语法，CSS 可以仅使用一个标签编写整个 HTML 文档。

Eric

评论永久链接# 2012年7月28日

最后一行应以
“……可以使用 BODY 标签编写整个 HTML 文档。”

Eddy Erkelens

# 2012年7月29日

使文本自动转换为链接

我现在已经用 jQuery 做到了

$("tr td:nth-child(2)").each(function(index)
	{
	if($(this).html() != '')
		{
		$(this).html(''+$(this).text()+'');
		}
	});

使用 CSS

tr td:nth-child(2):before
{
content: <a href="https://maps.google.nl/maps?q=' attr(text) '&hl=nl&t=m&z=11">';
}
tr td:nth-child(2):after
{
content: '</a>';
}

Ryan

评论永久链接# 2012年7月29日

这似乎不适用于常规 CSS，您想做什么？
Chris Coyier

评论永久链接# 2012年7月29日

是的，通过伪元素添加 HTML 不太可能发生。我认为这跨越了界限。
Hugo Giraudel

评论永久链接# 2012年7月30日

此外，我认为这既没有用处也不合理。

Remi Grumeau

# 2012年7月30日

http://we-are-gurus.com/labs/css3/css3-3d-block-minecraft.html
这是一个用 ::pseudo 制作的小方块，当然，通过伪元素创建缺失的 3 个面也将非常棒！

Chuck Neely

# 2012年7月30日

使用单个 html 元素的 CSS“加载”或“旋转器”图标（假设对伪元素动画的支持更好）

Dabblet 示例（使用多个 div）：http://dabblet.com/gist/3205691

Luís Carmona

# 2012年7月30日

我想构建一堆代表相册的照片。我只能得到三张叠加的照片：::before、::after 和元素本身。

就像 Chuck Neely 说的那样，伪元素上的动画也是一个问题。我也有这个旋转器问题。

C. L.

评论永久链接# 2012年7月31日

是的，这里也使用了相同的照片堆栈。我使用 ::before 来创建额外的照片边框，但 ::after 已经被 clearfix 使用了。

Niels Matthijs

# 2012年7月30日

伪元素实际上是为了我们现在如此喜欢的那个原因而设计的吗？我一直认为将它们用作样式挂钩有点像变通方法，而不是预期的行为（这在很大程度上解释了为什么只有两个）。

我也偶尔希望我们有超过两个伪元素（通常与图标、三角形和在单个元素上定义的清除浮动有关），尽管这些情况很少见，我想知道我们是否过度使用了这种（不可否认非常有用）变通方法，而是忘记了更传统的样式方法（如多个背景）？

C. L.

评论永久链接# 2012年7月31日

是的，我同意；我在使用伪元素作为图标字体时发表了类似的评论。

Charlie Hield

# 2012年7月30日

这是一个示例，我可以在其中使用一些额外的伪元素，这样我就不必使用额外的 span 标签。

FremyCompany

# 2012年7月30日

我不知道我们是否需要更多框或一种将框划分为更小块的方法。无论如何，我认为区域规范是此功能最棒的用例来源。

顺便说一句，我在这些示例中使用了 ::slot() 表示法。

/* divide an element into slots */
article {
    local-flow: header, body, footer;
    content: slot(header) slot(body) slot(footer);
}

/* redirect elements to the good slot */
article > *           { flow-to: body;   }
article > h1          { flow-to: header; }
article > .aside      { flow-to: footer; }
article > .footnote   { flow-to: footer; }

/* format the slots the way we like */
article::slot(header) { ... content: flow-from(header); ... }
article::slot(body)   { ... content: flow-from(body); ...   }
article::slot(aside)  { ... content: flow-from(aside); ...  }
article::slot(footer) { ... content: flow-from(footer); ... }

这也解决了像语音气泡这样的案例。

.message::before { content: slot(bubble) open-quote; ... }
.message::slot(bubble) { ... }

从我在这里看到的，::between-elements 对我来说似乎不错。

使用 CSS 属性而不是伪元素的优势在于，一旦 CSS 工作组找到一种解决方案，允许多个样式表将元素添加到列表值属性中而无需清除在样式表其他地方添加的元素，我们将有机会将插槽添加到 content() 中，而无需担心为每个添加使用唯一的索引（::after(1)、::after(2)……）。

m.saghas

# 2012年7月30日

感谢您使写作变得非常有趣，易于理解。

Jakob

# 2012年7月31日

拥有 *n* 个伪元素最终将使我们能够将内容与样式分离。

目前我们都(?)添加了虚假的毫无意义的模拟来在页面上添加额外的元素，这些元素纯粹是为了演示目的，例如

<span class="space-ship-flying"></span>

这仅与页面的呈现有关，与内容无关（因此与使用 font 标签一样糟糕！）。

如果整个元素可以完全移动到演示层，那将是一个更好的实践。


.article:pseudo("space-ship-flying")
{
content: url("img/space-ship-flying.png");
position: absolute;
etcetera: etcetera;
}

或使用上面提到的代码

@pseudo space-ship-flying 
{ //css properties }

article:after
{
pseudo: @space-ship-flying;
}

Rachel

# 2012年7月31日

能够拥有完全脱离 DOM 的伪元素将非常棒。大多数 :after 和 :before 的用法实际上并非其最初的用途。如果您能够创建一个伪元素，然后指示它应该出现在页面中的哪个位置，例如这样，那就太好了。

@pseudo-element{
    content: "blah";
    dom: article header .avatar;
}

Ryan

# 2012年7月31日

Rachel的想法很有趣。我认为如果我们必须将这种“dom”选择器放在伪元素的实际属性中，可能会偏离CSS标准。

基于大多数CSS选择器的使用方法，以及迄今为止在此处提出的想法，我可能会选择以下解决方案


@pseudo article_avatar
{
    content: "blah"; 
}

article header .avatar
{
    before: article_avatar;
}

这样一来，我们就可以在除“article header .avatar”之外的其他地方使用名为“article_avatar”的伪元素。
而且它简单易懂 :)

Anders Grimsrud

# 2012年8月1日

我遇到的另一个用例是在您想以与结束引号不同的样式显示引用的cite属性时。我整理了一个示例进行说明。

此外，在使用精灵图时，我发现更多的伪元素将非常有帮助！

话虽如此，本次讨论中有很多创意。我个人希望保持简单。CSS3 引入了用于伪元素的双引号。那么，就像ID和类一样，是否可以自由地根据我们的偏好命名伪元素呢？

然后，您可以轻松地解决最初的“气泡问题”，添加以下任一项：

(1) 第二个::after元素

q::after(2) { }

(2) 链式::after元素

q::after::after { }

(3) 自定义链式元素

q::before::bubble-tip

…或 (4) 完全独立的元素

q::bubble-tip { }

Pat

# 2012年8月1日

我真正希望的是能够像Opera中的Dragonfly那样，在Firefox/Chrome的DevTools DOM检查器中看到伪元素！

Pat

评论永久链接# 2012年8月1日

似乎有人已经在Chrome DevTools中请求了此功能
http://code.google.com/p/chromium/issues/detail?id=123343&q=feature%3DDevTools%20pseudo&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary
Shaun Lynn

评论永久链接# 2012年8月1日

我不熟悉Dragonfly的开发工具，但您可以在Chrome Dev Tools中看到伪元素。它们显示在“匹配的CSS规则”下，位于“元素”选项卡的“样式”窗格中。您可能没有向下滚动足够多以查看它们。
Pat

评论永久链接# 2012年8月1日

嘿，Shaun，

我知道您可以在CSS样式面板中看到它们，但您无法在DOM检查器中直观地看到它们。请查看Dragonfly中伪元素的此屏幕截图http://i.imgur.com/khceh.png。注意h2内部的<::after>元素。

Jonny Asmar

# 2012年8月12日

我完全可以预见多个伪元素会带来无数好处。我最近遇到的一个例子是尝试使用纯CSS创建文件夹选项卡式按钮。这种选项卡在两侧都有“S”形曲线。我很容易使用before和after创建其中一侧。一个用作带圆角边框的遮罩层类型，另一个填充遮罩和实际元素之间的间隙。如果只有一个伪元素，我就可以遮罩另一侧，并使用纯CSS实现完美的文件夹选项卡按钮。不幸的是，我不得不选择右对齐选项卡，并且只有一侧有“S”形曲线:(

Michael Keating

# 2013年10月6日

您是否考虑过在内容：“”中创建div，这些div可以拥有自己的伪:before？

Ryan McKay

评论永久链接# 2013年11月13日

使用content属性创建实际元素可能会再次交叉，因为它对DOM的影响有点过大，而不仅仅是通过属性添加文本的良好的伪元素。
runeform

评论永久链接# 2014年2月20日
这是一个有趣的想法。通过将div的选择器添加到样式中，您实际上会创建一个无限循环。但这不可能起作用。我需要尝试一下。试图思考这个的实际用途让我头疼。
```
.loop:after{
 content: '<div class="loop"></div>';   
}
```

derylius

# 2013年11月12日

我更喜欢::after::after语法，因为对我来说它更有意义。

我遇到的一个可能的用法是

blockquote::before{
    content: '„';
}
blockquote::after{
    content: '“';
}
blockquote::after::after{
    content: attr(cite);
}

这在基本的CSS布局中完全说得通，但目前只能在JavaScript中实现。

Scott Showalter

# 2014年2月21日

趁此机会，让我们也恢复::outside 伪包装器，它已经提出了多个的方法（语法形式为::outside(2)/::outside(3)等）。我不是说我坚持这种带括号的数字语法格式，但它有效——它合理、简洁，并且允许我们为多个伪元素提供语义顺序/组织，无论它们是::outside还是::before或::after或::whathaveyou，并且比derylius描述的语法格式（::after::after）稍微简洁一些（代码更少），尽管您可能会认为后者已经存在并且可以工作。

无论如何，这个想法是在2003年的CSS3工作草案中提出的
http://www.w3.org/TR/css3-content/#wrapping

猜测William Malo不知道这已经被规范化了，但我很高兴看到我不是唯一一个想要这个或想到这个的人！添加到Malo先生提到的那些用例中的另一个用例

这将使垂直居中更简单，无需使用额外的非语义元素（讨厌它们！）。或者当权者可以允许vertical-align: middle对div起作用。那也很好。

无论如何，让我们减少HTML水域中的非语义污染吧！

Brian P

# 2014年4月13日

这方面有什么进展吗？为CSS添加更多伪元素就像在现实生活中拥有悬浮汽车一样。

Alexandros T.

# 2014年6月9日

在我的例子中，我需要一个气泡，但需要双边框。使用一个额外的::before / ::after伪元素可以很容易地实现这一点。

Matt Swensen

# 2014年6月11日

我很想使用多个伪元素来创建（更多）复杂的加载动画。这样，我就可以在等待数据的UI组件上添加一个`loading`类，并将其他所有内容保留在样式表中。

Chris Coyier

# 2014年7月1日

Seph Coster写道

我目前遇到了一个问题，我想在元素前面添加文本（导航面包屑的“返回到”），我还想添加具有不同边框选项和样式的字体图标。我目前无法做到这一点，这将是允许规范中使用多个伪元素的一个很好的用例。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。