Grafisches Element an Textlänge anpassen

moreplz

Grünschnabel
Hallo zusammen ich habe folgendes Problem:

Ich will auf meiner Webseite ein Tag-System integrieren und hab mir dazu folgendes überlegt:

ex.jpg


Wie man hier sieht habe ich das "Tag" in 3 Teile geschnitten, tl.png, tm.png und tr.png (left, mid, right).. Nun hab ich mir das so überlegt, dass ich es mit befor7after mache, aber das geht nicht.

Mein Code:
HTML:
<style type="text/css">
  a.tag:before {
	  content: url(tag_left.png);
  }
  a.tag:after {
	  content: url(tag_right.png);
  }
  a.tag {
	  background:url(tag_middle.png) repeat-x;
	  height:25px;
	  line-height:25px;
	  color:#996633;
	  text-shadow:0px 1px #rgba(0,0,0,0.7);
	  text-decoration:none;
  }
</style>

<a href="#" class="tag">hihihi</a>

Das Ergebnis;
err.jpg


Hab schon mit padding und margin rumprobiert aber bisher keinen erfolg.. hoffe jemand kann mir weiterhelfen.. Dankeee :)
 
Bevor du weiter mit :before und :after kämpfst, würde ich dir empfehlen es einfach mit mehreren Elementen zu machen. Das hat mehrere Vorteile:
1. Funktioniert in "jedem" Browser
2. Du kannst CSS Sprites benutzen (keine Ahnung ob das mit before/after geht)
3. Wie du siehst, sind die beiden Grafiken innerhalb des Elementes. Selbst wenn du sie vertikal richtig ausrichten kannst, wirst du durch den transparenten Bereich der "Spitze" den Hintergrundverlauf sehen.
 
Hallo,

es würde sicherlich auch mit den Pseudoelementen funktionieren, aber CPoly hat recht: Der IE7 unterstützt das nicht und der IE8 unterstützt auch nur bestimmte CSS-Eigenschaften in den Pseudoelementen. Man muss sich da leider überraschen lassen.

Solange aber vom HTML-Kontext nichts bekannt ist (außer dass die Pseudoelemente in einem A-Element untergebracht werden sollen) kann man dir nur mit einem Link helfen:
 
Zurück