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

Question

当页面宽度为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: "";
   }
}

Answer 1

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

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

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

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

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