0

我试图让我们的 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. 将“页面的默认标题”包装在一个跨度中，并在使用备用标题时将其设置为 display: none 在 CSS 中。

IE

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

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

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

4

1 回答 1

1

我不确定这是否正是你想要的，但你可以尝试这样的事情：

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

http://jsfiddle.net/yJKEZ/

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

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

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

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

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

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

只是让你考虑我的回答......我希望我能帮助你解决你的问题！

于 2014-04-03T02:19:19.840 回答