Add content after text

Question

Is it possible to add text by pseudo-selector ::after or ::before to a specyfic word? For ex. I would like to add pdf icon always next to word "Download". [PDF] Download

Or maybe is it another method?

Answer 1

your link on pdf need contain pdf, then you could use this selector:

a[href*="pdf"]:before {content: '[ICON] '}
a[href*="pdf"]:after {content: ' 😅';}

<a href="http://example.com/test.pdf" class="pdf">learn html and css in one week</a>