html - 根据视口(viewport)宽度更改按钮文本

Question

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

它的文字是“关闭”并且是右对齐的。但是，当视口(viewport)宽度低于 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';
    }
}

演示

Try before buy