Bild einem Textlink automatisch voranstellen

[-André-]

Hallo,
ich habe folgende Frage:

Ist es möglich mit Hilfe von Css einem "gewöhnlichen" Link automatisch eine Grafik voranzustellen, so wie in der Skizze gezeigt?

Gruß

-André-

 

[Maik]

Hi,

du kannst das Bild dem Link als Hintergrundbild (ohne Bildwiederholung) zuweisen und entsprechend der Grafikbreite einen linken Innenabstand einrichten, damit der Linktext nicht direkt über dem Hintergrundbild sitzt, sondern nach rechts eingerückt wird.

a {
background:url(pfad/zur/grafik.png) no-repeat left center;
padding-left:45px;
text-decoration:none;
}

Soll die Regel nur für eine bestimmte Auswahl an Links innerhalb des Dokuments gelten, wird sie mit Hilfe einer Klasse spezifiziert:

a.bgImage {
background:url(pfad/zur/grafik.png) no-repeat left center;
padding-left:45px;
text-decoration:none;
}

a href="#" class="bgImage">LINK</a>

 

[Daniela_ds]

Hallo Maik,

vor 2 Tagen gepostet und schon über Google gefunden
Funktioniert wunderbar! Vielen herzlichen Dank!

Lg, Dani


PS: Ich hab bei mir noch das hier hinzugefügt:

a.bgImage:hover {
background:url(pfad/zur/grafik_hover.png) no-repeat left center;
text-decoration:underline;
}