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>

我有这个按钮,当页面的宽度为768时,我想取下内容.我该怎么做？

我试图使用媒体查询：

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

解决方法

作为参考,CSS的content属性仅适用于：before和：after伪元素.您不能使用它来更改HTML文档中找到的文本.

这里你最好的选择是将文本包装在span元素中：

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

然后通过将其display属性设置为none来隐藏span元素：

@media (max-width: 768px) {
    .btn span {
        display: none;
    }
}