Inhalt nach dem Text hinzufügen

Question

Ist es möglich, Text nach Pseudo-Selektor :: after oder :: before zu einem bestimmten Wort hinzuzufügen? Für z. Ich möchte PDF-Symbol immer neben dem Wort "Download" hinzufügen. [PDF] Download

Oder ist es vielleicht eine andere Methode?

Answer 1

Ihren Link auf pdf braucht pdf enthalten, dann können Sie diesen Selektor:

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>

Answer 2

Sie können von :after oder :before für Einsatz content auf Elemente keinen Text. mein Vorschlag ist Wrap Text in span mit class und verwenden :after oder :before.

.pdf:after { 
 
    content: ' Download'; 
 
}

<span class="pdf">[PDF]</span>

Für a Elemente verwenden a[href$=".pdf"]

a[href$=".pdf"]:after { 
 
    content: ' Download' 
 
}

<a href="http://e-book.com/css.pdf" class="pdf">Book</a>