CSS :before Selektor

  • Hallo Leute

    An die CSS-Fortgeschrittenen:

    Ich habe derzeit den Selektor (so glaub ich heisst das ja korrekt) :before auf dem a-Tag angewendet.

    So:

    HTML
    a:before { content: 'test'; }

    Nun möchte ich aber hinzufügen, dass ich dieses a:before nur dann anwenden möchte, wenn es ein Textlink ist.
    Mein Problem ist, dass das natürlich auch bei einem verlinkten Bild kommt und das sieht sch***** aus.

    Ich habe an sowas gedacht, dass ich irgendwie > verwende.
    Ich müsste CSS ja bloss sagen, dass ich, wenn im A-Tag ein img-Tag vorhanden ist, kein content kommt.
    Nur wie müsste ich das schreiben?

    Hab schon gegoogelt, gesucht und so weiter, aber nichts gefunden, was genau zutrifft.

    Danke für eure Hilfe.

    MFG ffx5

  • Ich hab so meine Gründe, warum ich das anders machen möchte.
    Es soll für ein CMS Design sein und der User hat keine Ahnung von Klassen und ID's.

    Ich weiss, es gibt ne Lösung, hatte das schon mal gesehen.
    Aber leider finde ich die gottverd***** Seite im Web nicht mehr.

  • Bist du dir sicher dass du da schon mal was anderes gesehen hast, es gibt nämlich eigentlich nichts derartiges in Css.

  • Bin mir eigentlich schon sicher.

    Es gibt ja solche Zeichen: >, +,
    [*], und so weiter.

    Kann man nicht irgenwas, wie: a:before > img oder sowas?

  • Hi,

    also ich hab das ohne Probleme hingekriegt.

    In einem container hab ich ne verlinkte h3-Überschrift und in der Zeile darunter ein verlinktes Bild:

    HTML
    <h3><a href="http://beispiel.de/">Textlink</a></h3>
    <p><a href="beispiel.de/"><img src="grafik.png" width="300" height="225" /></a></p>

    Formatiert hab ich dann so:

    HTML
    h3 a:before  {
        content:"Ein Text davor ";
        font-style:italic;
        color:red;
    }

    Das betrifft alle a's die nach einer h3 kommen.

    Wenn du lauter p's hast, dann wickel den Link noch in ein span z.B.

    HTML
    [code=html]
    <p><span><a href="http://beispiel.de/">Textlink</a></span></p>
    <p><a href="beispiel.de/"><img src="grafik.png" width="300" height="225" /></a></p>

    [/code]

    Dann müßtest du so formatieren:

    HTML
    p span a:before  {
        content:"Ein Text davor ";
        font-style:italic;
        color:red;
    }