Replace Text with CSS Only

Tutorial

In this snippet, you'll discover an example of replacing the default text of a "Download PDF" button with its Portuguese equivalent using CSS.

a.download-lnk-pdf {
  visibility: hidden;
}

a.download-lnk-pdf:before {
  content: 'Click here to download your PDF';
  visibility: visible;
}

Explanation

• The CSS rule hides the original text of the "Download PDF" button by setting its visibility to hidden.
• Using the :before pseudo-element, we insert content before the link, effectively replacing the original text with the desired text in Portuguese.
• By setting the visibility of the pseudo-element to visible, the replaced text becomes visible to users.

Considerations

While this approach offers a straightforward solution for text replacement, it's important to note that it's primarily a visual change and may not be suitable for websites prioritizing accessibility. In scenarios where accessibility is a concern, alternative methods such as JavaScript-based text replacement or utilizing accessible markup should be considered.

Conclusion

Although replacing text with CSS only provides a quick and easy solution for visual text replacement, it's essential to consider the implications for accessibility and usability. Use this method judiciously and prioritize accessible design practices for optimal website performance.