Jak wymienić zawartość przycisku, gdy strona ma szerokość 768 pikseli?

Question

Jak wymienić zawartość przycisku, gdy strona ma szerokość 768 pikseli?

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

Mam ten przycisk i chcę usunąć zawartość, gdy strona ma szerokość 768. Jak mogę to zrobić?

starałem się używać zapytań o media:

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

Answer 1

Dla porównania, CSS za content własność działa tylko na pseudo-elementów :before i :after. Nie można go użyć do zmiany tekstu znalezionego w dokumencie HTML.

Najlepszym rozwiązaniem tutaj byłoby zawinąć tekst w elemencie span:

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

Następnie ukryć element span przez ustawienie jego display właściwość none:

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

Answer 2

Jak już odpowiedział Właściwość content działa w pseudo elementach. Więc inne podejście byłoby ustawić tekst jako zawartości :after pseudo znacznika <a>, więc będzie można oczyścić go z kwerendy mediów:

<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: ""; 
    } 
}