css - 如何使用生成的 :before or :after without absolute positioning? 进行 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. 将“页面的默认标题”包装在一个 span 中，并将其设置为显示:使用备用标题时在 CSS 中无。

即

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

这可行，但嵌套在 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 来执行此操作，并且虽然这可能是可能的，但它确实不是执行此类操作的最佳解决方案。特别是如果您的网站在不支持伪元素的旧浏览器中查看(现在用户什么也看不到!)。

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

只是让您考虑我的回答...希望我已经帮助您解决了您的问题!