Sayfanın genişliği 768 piksel olduğunda bir düğmenin içeriği nasıl değiştirilir?

Question

Sayfanın genişliği 768 px olduğunda bir düğmenin içeriği nasıl değiştirilir?

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

Bu düğmeye var ve sayfa bunu nasıl 768 genişliğindedir iken içeriği çıkarmak istiyor?

Ben medya sorgularını kullanmak çalışıyordu: Referans olarak

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

Answer 1

, BB'nin content özellik yalnızca :before ve :after sözde elemanları üzerinde çalışır. Bir HTML belgesinde bulunan metni değiştirmek için kullanamazsınız.

En iyi seçenek burada span eleman metin sarmak için olacaktır:

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

Sonra none onun display özelliğini ayarlayarak span eleman gizlemek:

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

Answer 2

Daha önce de cevap content özelliği, sözde öğeler içinde çalışır.

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

CSS: bir

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

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