Porka: ersten Buchstaben im Linknamen unterstreichen

Hallo,
ich habe mehrere Links und möchte dass der erste Buchstabe im Linknamen unterstrichen wird.
Wie macht man sowas ohne die Regeln zu verletzen, dass Css für die Gestaltung ist und Html für den Inhalt?

  1. Wie macht man sowas ohne die Regeln zu verletzen, dass Css für die Gestaltung ist und Html für den Inhalt?

    Möglicherweise mit ::first-letter

    1. Wie macht man sowas ohne die Regeln zu verletzen, dass Css für die Gestaltung ist und Html für den Inhalt?

      Möglicherweise mit ::first-letter

      Die Crux an der Sache ist, dass das Element in einem Block-Kontext sein muss - also inline-block für das a-Element. Das wird aber im Internet Exploder 6 und 7 nicht funktionieren.

      http://jsfiddle.net/aTJ5A/

      1. Hallo,

        Wie macht man sowas ohne die Regeln zu verletzen, dass Css für die Gestaltung ist und Html für den Inhalt?
        Möglicherweise mit ::first-letter
        Die Crux an der Sache ist, dass das Element in einem Block-Kontext sein muss - also inline-block für das a-Element. Das wird aber im Internet Exploder 6 und 7 nicht funktionieren.

        die kennen AFAIK sowieso kein ::first-letter ...

        Ciao,
         Martin

        --
        Zwei Mäuse treiben's miteinander. Sagt der Mäuserich: "Hoffentlich ist nicht wieder alles für die Katz."
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Die Crux an der Sache ist, dass das Element in einem Block-Kontext sein muss - also inline-block für das a-Element. Das wird aber im Internet Exploder 6 und 7 nicht funktionieren.

          die kennen AFAIK sowieso kein ::first-letter ...

          So ein Unsinn - das geht sogar im IE5 wenn ich jetzt nicht falsch liege.

          1. Hi,

            Die Crux an der Sache ist, dass das Element in einem Block-Kontext sein muss - also inline-block für das a-Element. Das wird aber im Internet Exploder 6 und 7 nicht funktionieren.
            die kennen AFAIK sowieso kein ::first-letter ...
            So ein Unsinn - das geht sogar im IE5 wenn ich jetzt nicht falsch liege.

            potzblitz, tatsächlich!
            Und dem ist es sogar egal, ob ich es mit einem Doppelpunkt notiere oder mit zweien.

            Jetzt bin ich beeindruckt - galt doch bisher immer die Faustregel "Alles was Spaß macht, kennt der IE nicht", von der erst IE8 allmählich abweicht ...

            Ciao,
             Martin

            --
            Der Mensch denkt, Gott lenkt.
            Der Mensch dachte, Gott lachte.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. Hi,

    ich habe mehrere Links und möchte dass der erste Buchstabe im Linknamen unterstrichen wird.
    Wie macht man sowas ohne die Regeln zu verletzen, dass Css für die Gestaltung ist und Html für den Inhalt?

    mit der Pseudoklasse :first-letter?

    Ciao,
     Martin

    --
    Lache, und die Welt wird mit dir lachen.
    Schnarche, und du schläfst allein.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Om nah hoo pez nyeetz, Der Martin!

      mit der Pseudoklasse :first-letter?

      Pseudo_element_ ::first-letter

      SCNR
      Matthias

      --
      1/z ist kein Blatt Papier.

  3. Moin.

    ich habe mehrere Links und möchte dass der erste Buchstabe im Linknamen unterstrichen wird.
    Wie macht man sowas ohne die Regeln zu verletzen, dass Css für die Gestaltung ist und Html für den Inhalt?

    Mit <span>. Manchmal muss man Elemente einbauen die nur der Formatierung dienen. Eventuell hat aber die HTML5 CSS3 Trickkiste noch irgendeinen Zuber in petto. Spontan faellt aber nix anderes ein.

    --
    Signaturen sind blöd!
    1. Om nah hoo pez nyeetz, Steel!

      Mit <span>. Manchmal muss man Elemente einbauen die nur der Formatierung dienen. Eventuell hat aber die HTML5 CSS3 Trickkiste noch irgendeinen Zuber in petto. Spontan faellt aber nix anderes ein.

      Schon die CSS2(.1 ?)-Trickkiste! http://www.w3.org/TR/CSS2/selector.html#first-letter

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. Schon die CSS2(.1 ?)-Trickkiste! http://www.w3.org/TR/CSS2/selector.html#first-letter

        Du bist 15 Jahre zu spät mein Jung :)

    2. Mit <span>.

      Wie kannst du nur?

      Manchmal muss man Elemente einbauen die nur der Formatierung dienen.

      Ja, aber nicht in diesem Fall.

      Eventuell hat aber die HTML5

      Wieso HTML5? Ich dachte es geht um CSS :p

      CSS3 Trickkiste

      Die schon eher - aber selbst in der alten CSS1-Grabbelkiste gibts das schon. Nur wegen inline-block ist man auf CSS 2.1 angewiesen.

      1. Hi!

        Die schon eher - aber selbst in der alten CSS1-Grabbelkiste gibts das schon. Nur wegen inline-block ist man auf CSS 2.1 angewiesen.

        Ja. Das ist ja das Problem. In einem li sollte es funktionieren. Da frag ich mich, wie die Browser das bei einem <li><a>text</a></li> anwenden. Muesst ich gleich mal ausprobieren. Bei einem Menue sollte das dann ja machbar sein.

        --
        Signaturen sind blöd!
        1. Muesst ich gleich mal ausprobieren.

          wozu?

          1. Muesst ich gleich mal ausprobieren.

            wozu?

            Wegen deiner letzten Einschraenkung. Ich bin nunmal beruflich sehr IE geschaedigt.

            Ein in eine Liste verpacktes Menu macht so jedenfalls keine Probleme in meinem IE8. Haben wir hier noch nen 6er?

            --
            Signaturen sind blöd!
        2. Hallo,

          Die schon eher - aber selbst in der alten CSS1-Grabbelkiste gibts das schon. Nur wegen inline-block ist man auf CSS 2.1 angewiesen.

          Ja. Das ist ja das Problem. In einem li sollte es funktionieren. Da frag ich mich, wie die Browser das bei einem <li><a>text</a></li> anwenden. Muesst ich gleich mal ausprobieren. Bei einem Menue sollte das dann ja machbar sein.

          Das funktioniert nach meinen Experimenten nicht:
          Der CSS3-Selektor-Entwurf sagt:

          <zitat>
              If the letters that would form the ::first-letter are not in the same
              element, such as "‘T" in <p>'<em>T..., the UA may create a ::first-letter
              pseudo-element from one of the elements, both elements, or simply not
              create a pseudo-element.
          </zitat>

          aktuelle Versionen von Firefox, IE, Chrome und Opera erzeugen ein ::first-letter-Pseudoelement des inneren Elementes, wenn dieses ein Block-Element ist. Das gilt genauso für das Pseudoelement :first-letter aus CSS 2.1. Deswegen greift nur suits inline-block-Trick für das a-Element.

          Freundliche Grüße

          Vinzenz

          1. Om nah hoo pez nyeetz, Vinzenz Mai!

            aktuelle Versionen von Firefox, IE, Chrome und Opera erzeugen ein ::first-letter-Pseudoelement des inneren Elementes, wenn dieses ein Block-Element ist. Das gilt genauso für das Pseudoelement :first-letter aus CSS 2.1. Deswegen greift nur suits inline-block-Trick für das a-Element.

            wobei das a-Element in einer Liste auch ein Blockelement sein kann.

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. Hallo,

              aktuelle Versionen von Firefox, IE, Chrome und Opera erzeugen ein ::first-letter-Pseudoelement des inneren Elementes, wenn dieses ein Block-Element ist. Das gilt genauso für das Pseudoelement :first-letter aus CSS 2.1. Deswegen greift nur suits inline-block-Trick für das a-Element.

              wobei das a-Element in einer Liste auch ein Blockelement sein kann.

              stimmt auffallend, siehe Pax' Problem.

              Freundliche Grüße

              Vinzenz

          2. In meinem IE* funktioniert <li><a>Linktext</a></li>
            mit li:first-letter {color:#0F0;}

            Das L ist gruen.

            --
            Signaturen sind blöd!
            1. Hallo,

              In meinem IE* funktioniert <li><a>Linktext</a></li>
              mit li:first-letter {color:#0F0;}

              Das L ist gruen.

              ich hab' nicht richtig getestet :-(

              Wehe, Du gibst nun dem a-Element display: block oder inline-block, dann verschwindet die grüne Farbe wieder. Da ich diese Eigenschaft nicht entfernt hatte, gelangte ich zu einem falschen Schluss.

              Freundliche Grüße

              Vinzenz

              1. Hoi,

                Wehe, Du gibst nun dem a-Element display: block oder inline-block, dann verschwindet die grüne Farbe wieder. Da ich diese Eigenschaft nicht entfernt hatte, gelangte ich zu einem falschen Schluss.

                Ja. Kann ich verstehen.

                Ich finde ein <span> um die ersten Buchstaben nicht grad toll, aber das funktioniert jedenfalls in jedem Fall.

                --
                Signaturen sind blöd!
            2. In meinem IE* funktioniert <li><a>Linktext</a></li>
              mit li:first-letter {color:#0F0;}

              Das L ist gruen.

              Ja, so soll es auch sein - das li-Element ist vom Typ "list-item" und das ist besitzt einen block formatting context - darum kann auch ::first-letter drauf angewendet werden.

              Das a-Element ist ein inline-Element - also alles klar.

              In meinem Beispiel ist inline-block notwendig, weil eben ein a-Element als inline-Element keinen Block erzeugt und somit, wenn es nicht an erster Stelle im Fließtext steht, kein ::first-letter besitzt.

  4. Om nah hoo pez nyeetz, Porka!

    ich habe mehrere Links und möchte dass der erste Buchstabe im Linknamen unterstrichen wird.

    Hast du dabei auch einen http://de.selfhtml.org/html/verweise/tastatur.htm#kuerzel@title=accesskey im Hinterkopf?

    Matthias

    --
    1/z ist kein Blatt Papier.