CSS 当前项目的内容属性

Question

有没有"native"HTML/CSS的方法来使用

:before { content: ''; }
:after  { content: ''; }

当前语句的属性（而不是元素之前或之后的伪元素）？

类似的东西？

.current-item {
    content: 'New';
}

编辑

背景：我想对一个长词做一个响应式的解决方法，我想通过使用

用一个较短的词替换它

@media (max-width: 680px) {}

Answer 1

当前的 CSS 规范将 content 属性定义为仅适用于 :before 和 :after 伪元素。已经有允许更广泛使用的草案，但它们大多没有实施。 WebKit 浏览器只允许您指定图像值，例如.current-item { content: url(New.png) }，但您可能需要跨浏览器解决方案。

您可以按照评论中的建议，让两个元素在显示中切换。您可以使 HTML 中的一个备选内容正确，另一个生成内容，使用具有空内容的元素。一个优点是页面内容正确，如“看到”的那样。通过搜索引擎和非 CSS 渲染，只有其中一种选择。示例（点击“整页”查看宽视口渲染）：

<style>
@media (max-width: 680px) {
  .current-item {
     display: none;
   }
   .current-item-2:after {
     content: "New";
   }
}
</style>
<span class=current-item>Totally renewed</span><span class=current-item-2></span>

CSS 当前项目的内容属性

CSS content attribute for current item

html

css

pseudo-element

css-content

编辑