Pseudoelement :after funktioniert nicht vernünftig

[Quabbe]

Hey Leute,

ich hab da ein kleines Problem. Ich habe einem Link eine Hintergrundgrafik zugewiesen und möchte ihm mittels a:after das Endstück der Grafik hinten dran setzen. Das sieht ungefähr so aus:



Klappt aber wie man sieht nicht so richtig. Beim ersten Link klebt das Endstück über der Hintergrundgrafik und beim zweiten Link unterscheidet sich der Schattenwurf von der Grafik, obwohl beide Bilder (button und buttonend) als PNG24 abgespeichert wurden. Der dazugehörige CSS-Code ist folgender:

a.button {
background:url(../img/button.png);
height:42px;
display:block;
text-decoration:none;
color:#6c7073;
font-size:10pt;
line-height:40px;
text-indent:15px;
text-shadow:#bac9c9 0 0 7px;
float:left;
margin:0 5px;
}


a.button:after {
content:url(../img/buttonend.png);
float:right;
}

Jemand eine Ahnung, wo der Fehler liegen könnte?

 

[threadi]

Könntest Du nicht statt rechts zu floaten das Ende absolut dahinter positionieren?

Ansonsten: So wie der Button aussieht, wäre das auch mit purem CSS möglich. Schau dir mal border, border-radius und box-shadow an.

Moderation: Verschoben von HTML zu CSS. Nächstes Mal bitte besser aufpassen wo Du etwas postest.

 

[Quabbe]

Hi threadi,

danke für den Tipp! Sieht mit gradient, border-radius und box-shadow tatsächlich aus wie die Grafik. Damit hat sich mein Problem auch schon erledigt. :)