Come sostituire il contenuto di un pulsante quando la pagina ha una larghezza di 768px?

Question

Come sostituire il contenuto di un pulsante quando la pagina ha una larghezza di 768 px?

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

ho questo tasto, e voglio togliere il contenuto quando la pagina ha una larghezza di 768. Come posso fare questo?

stavo cercando di usare le media query:

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

Answer 1

Per riferimento, la proprietà del CSS content funziona solo sui :before e :after pseudo-elementi. Non è possibile utilizzarlo per modificare il testo trovato all'interno di un documento HTML.

La soluzione migliore sarebbe di avvolgere il testo in un elemento span:

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

poi nascondere l'elemento span impostando la proprietà display-none:

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

Answer 2

Come già risposto, la proprietà content funziona all'interno di pseudo elementi. Quindi, un altro approccio sarebbe quello di impostare il testo come un contenuto :after pseudo del tag <a>, quindi si sarebbe in grado di cancellare con la media query:

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