Html 当页面宽度为768px时，如何替换按钮的内容？

当页面宽度为768px时，如何替换按钮的内容

<a title"Reserve seu Ingresso" class="btn btn-blue" href="#reservar">
    <i class="fa fa-ticket 1x"></i>
    Reserve seu ingresso
</a>

---

作为参考，CSS的

content

属性仅适用于

：before

和

：after

伪元素。您不能使用它来更改HTML文档中的文本

您最好的选择是将文本包装在

span

元素中：

<a class="btn btn-blue" ... >
    <i ... ></i>
    <span>Text here</span>
</a>

---

如前所述，

content

属性在伪元素中工作。因此，另一种方法是将文本设置为

：在
标记的
伪内容之后，这样您就可以通过媒体查询将其清除：

<a title="Reserve seu Ingresso" class="btn btn-blue" href="#reservar">
    <i class="fa fa-ticket 1x"></i>
</a>

您可以使用媒体查询-只是为了让您知道。：）虽然可以使用伪元素和content属性（因为文本只存在于CSS中）来实现这一点，但是您应该通过CSS隐藏或显示，或者使用javascript来实现这一点。
<a title="Reserve seu Ingresso" class="btn btn-blue" href="#reservar">
    <i class="fa fa-ticket 1x"></i>
</a>

a.btn:after {
    content: "Reserve seu ingresso";
}

@media (max-width: 768px) {
    a.btn:after {
        content: "";
    }
}