根据视口宽度更改按钮文本

Question

我有一个按钮可以关闭首页中的灯箱。

文字说“关闭”，并且它是右对齐的。但是，当视口宽度小于400像素时，它可能与标题文本重叠。

因此，我想使用媒体查询将其与“ X”交换。

我尝试了.button:before哪种方法，但是无法以这种方式摆脱原始的“关闭”文本。

如何仅使用CSS来实现？

Answer 1

:before也使用伪元素将按钮的值设置为其默认值“ Close ”。这是一个例子：

的HTML

<span class="button" title="Close"></span>

的CSS

.button:before {
    content: 'Close';
}

@media screen and (max-width: 200px) {
    .button:before {
        content: 'X';
    }
}

演示版

购买前尝试