修改

Question

有没有＆＃34;本地人＆＃34; 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渲染，只有一个替代方案。示例（单击“整页”以查看宽视口渲染）：

＆＃13;

<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>

＆＃13;

当前项的CSS内容属性

修改

1 个答案: