如何在没有绝对定位的情况下使用生成的 :before 或 :after 进行 CSS 文本替换？

Question

我正在尝试让我们的 CMS 编辑器能够仅使用 css 覆盖来替换用于页面标题的文本。

<header data-alternate="An Alternate Title">
    This Page's Default Title
</header>

使用 :before 或 :after 标记，可以使用许多可用的替代标题之一。

header:before {
content: attr(data-alternate);
display: inline-block;
}

如果我们也可以说，

header:text {
    display: none;
    }

不幸的是，据我所知，没有很好的方法可以隐藏“此页面的默认标题”以将其替换为“备用标题”。如果这是一个 Sprite，我们可以使用像 Phark 或其他方法这样的常用图像替换技术之一。与 :before 生成的文本替换无关，因为 :before 还受到用于隐藏默认文本的 CSS 设备的影响，因此，例如，对于 Phark，:before 内容也是 -9999px。

我试图避免一些解决方案。

1. 使用 Phark 方法或类似方法隐藏默认文本，然后在 :before 内容上使用绝对定位将其放回左侧：0，顶部：0。如果可能，我希望/需要保留流量。
2. 将“页面的默认标题”包装在一个跨度中，并在使用备用标题时将其设置为在 CSS 中显示：无。

即

<header data-alternate="An Alternate Title">
    <span class="default">This Page's Default Title</span>
</header>

这可行，但嵌套在标题中的跨度令人不快。

有没有一种方法可以针对标签的文本而不针对其生成的 :before/:after 内容？有没有其他方法可以做到这一点？

Answer 1

我不确定这是否正是您想要的，但您可以尝试以下方法：

p {
    visibility: hidden;
}
p:before {
    content: attr(data-alternate);
    display: inline-block;
    visibility: visible;
}

http://jsfiddle.net/yJKEZ/

您可以将p 元素的可见性设置为隐藏，然后将:before 伪元素的可见性设置为在其父元素（p）中可见，尽管已设置。

如果这没有按预期工作，那么添加一个额外的跨度来帮助这个过程并没有什么大问题。它可能不那么干净，但它可以更好地工作。

不过，我确实想提出您为什么需要这样做的问题，并指出对这种方法的一些担忧......

首先，伪元素不是 DOM 的一部分，因此无法选择替代文本，并且浏览器（或用户）无法访问。屏幕阅读器或搜索引擎会看到默认文本，而不会注意替代文本，但这就是您的用户将看到的内容......这可能会导致一些混乱。

虽然您的问题表明您希望能够使用 CSS 来做到这一点，虽然这可能是可能的，但它确实不是执行此类操作的最佳解决方案。尤其是在不支持伪元素的旧版浏览器中查看您的网站时（现在用户什么都看不到！）。

我更推荐使用这样的方法来将图像换成打印样式表中的替代文本，或者将超链接的文本换成它所链接的完整地址（同样，主要用于打印样式表）。以这种方式更改标题等重要内容可能会导致许多其他问题，尤其是在可访问性方面。

只是让你考虑一下我的回答......我希望我已经帮助你解决了你的问题！