CODEWITHSUNDEEP
csspseudo-element
Pat
Pat

Reputation: 727

Add content after text

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?

Upvotes: 10

Views: 44477

Answers (2)

Ehsan
Ehsan

Reputation: 12969

You can use of :after or :before for insert content to Elements no text. my suggestion is wrap text in span with class and use :after or :before.

.pdf:after {
  content: ' Download';
}
<span class="pdf">[PDF]</span>

For a Elements use a[href$=".pdf"]

a[href$=".pdf"]:after {
  content: ' Download'
}
<a href="http://e-book.com/css.pdf" class="pdf">Book</a>

Upvotes: 4

kRicha
kRicha

Reputation: 837

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>

Upvotes: 22

Related Questions