Heute mal ein kleiner CSS Hack, über den ich vor einiger Zeit selbst mal gestolpert bin. Folgende Ausgangslage: Ein Link, dessen HTML nicht geändert werden kann, soll ein FontAwesome Icon davor erhalten. Klar, mit dem :before Pseudo-Element geht das ja ganz einfach. Aber dann ist da noch die Sache mit der text-decoration. Die war auf underline gesetzt und war natürlich auch unter dem Icon zu sehen. Was also tun, um beim Text den Unterstrich zu erhalten, beim Icon aber zu entfernen?
Die Lösung ist tatsächlich sehr simpel: Das :before Pseudo-Element erhält die Angabe display: inline-block; – siehe folgenden Pen:
Mit dieser Lösung kann man auch noch einen zusätzlichen padding angeben, ohne dass der gesamte Link zu bescheuert aussieht. 🙂