當頁面寬度為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;
    }
}

Answer 2

如前所述， content屬性在偽元素中工作。 因此，另一種方法是將文本設置為:after <a>標簽的偽內容:after ，以便您可以使用媒體查詢清除它：

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

CSS：

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

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