html - 当页面宽度为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>

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

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