How to replace button contents when the page is 768 pixels wide?

Question

How to replace button contents when the page is 768 pixels wide?

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

I have this button and I want to remove the content when the page is 768 wide. How can I do this?

I tried to use media queries:

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

Answer 1

For reference, the CSS content property only works with :before and :after pseudo-elements. You cannot use it to modify the text contained in an HTML document.

Your best option here is to wrap the text in a span element:

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

Then hide the span element by setting its display property to none :

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

Answer 2

As already mentioned, the content property works in pseudo-elements. So another approach would be to set the text as an alias :after <a> tag so that you can clear it with a 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: ""; } }