[CSS] a:after niet onderstrepen

[_Thanatos_]

Ik heb het volgende stukje ter verduidelijking.

Cascading Stylesheet:

a[rel=external]:after {
   content: ' [' attr(href) ']';
   font-style: italic;
   text-decoration: none;
}

In theorie zou dit achter een link die rel="external" heeft, de URL moeten plaatsen tussen twee rechte haakjes, in cursieve niet-onderstreepte letters.

Maar wat blijkt, het stukje wordt wél onderstreept, in zowel Opera als Firefox (in IE werkt dit natuurlijk helemaal niet, maar who cares ). Het komt waarschijnlijk doordat een <a> zelf onderstreept weergegeven wordt, en dat daarom die text-decoration niet toegepast wordt. Maar drie redenen waarom ik denk dat dat wel moet:

1. a[rel=external]:after is specifieker dan a[rel=external] en CSS-rules worden op volgorde van specificiteit toegepast.
2. een text-decoration:none op een a[rel=external]:hover werkt prima.
3. font-style wordt ook netjes toegepast.

Iemand een briljant idee?

[crisp]

Tsja:

HTML:

<span style="text-decoration:underline">Tnet <span style="text-decoration:none">[http://tweakers.net]</span></span>

ik vind het niet gek

[_Thanatos_]

Het idee is leuk, en zeker gewaardeerd
Maar ik vergat er misschien bij te vertellen dat ik een "pure CSS" oplossing zoek. Mijn code werkt fantastisch nml, behalve dat onderlijntje...

Ohja, ik neem aan dat het al duidelijk was het het echt niet in IE hoeft te werken he

[ Voor 25% gewijzigd door _Thanatos_ op 28-12-2005 00:49 ]

[crisp]

Als je mijn voorbeeld bekeken had in een test-documentje dan had je gezien dat daar ook de gehele regel onderstreept was, en dat dat eigenlijk ook logisch is.
Je zou dat op kunnen lossen door het gedeelte dat niet onderstreept moet worden bijvoorbeeld een achtergrondkleur te geven.

[ Voor 12% gewijzigd door crisp op 28-12-2005 09:19 ]

[_Thanatos_]

Hmm, ik vind het niet zo logisch, maar je hebt wel gelijk dat het hele ding van jou onderstreept wordt. Het is logisch in die zin dat jouw binnenste <span> net zo werkt als mijn :after.

Ik begrijp alleen niet helemaal wat een achtergrondkleurtje nou moet oplossen... kan ik wel doen, maar daarmee in de onderstreping niet weg.

Trouwens, ik bedenk me net... text-decoration is een set, en niet een enum, om maar ff in programmeertermen te spreken. dus in de binnenste span zou de text-decoration effectief op underline+none komen te staan. Sja dan is het wel logisch... Misschien een manier om "not underline" op te geven?

[JHS]

_Thanatos_: Je onderstreept het volledige element. Als je dan de onderstreping van een déél ervan weghaald, zit die oorspronkelijke onderstreping er afaik nog "achter", en is dus nog zichtbaar. Om te voorkomen dat 'ie gezien wordt, zou je dus áchter de tekst, maar vóór de oorspronkelijke onderstreping een laagje kunnen doen: de achtergrond kleur. Afaik.

En wat je zegt over sets / enums is volgens mij niet helemaal een juiste manier van bekijken, het is volgens mij veel meer een gelaagd geheel .

[ Voor 3% gewijzigd door JHS op 28-12-2005 18:15 ]

[_Thanatos_]

Nouja, ik heb het dus geprobeerd met een achtergrondje, maar de onderstreping wordt in de binnenste <span> gewoon doorgevoerd. Ook al geeft de DOM inspector aan dat de computed style text-decoration:none is. Sterker nog, als ik de binnenste <span> verschuif door em "position:relative;top:2px" te geven, zie ik dat de onderstreping meeschuift...

[Fuzzillogic]

Uiteraard kun je altijd nog wat met Javascript en DOM spelen om het zo te krijgen als jij wilt, met de CSS als JS-loze fall back optie.

[crisp]

Dit werkt hier toch prima:

HTML:

<style type="text/css">

a[rel=external]:after {
   content: ' [' attr(href) ']';
   font-style: italic;
   text-decoration: none;
   background-color: white;
}

</style>
<a href="http://tweakers.net" rel="external">Tnet</a>

(bij een default document, en dus witte achtergrond - je zou eventueel ook nog met inheritance kunnen werken).

[ Voor 17% gewijzigd door crisp op 28-12-2005 23:45 ]

[Fuzzillogic]

Hier toch niet.. O8.5, O9pr1, FF1.5. Heb het in een HTML 4.0 transitional docje gezet, en ik krijg toch echt een lijntje onder het toegevoegde stukje tekst. Tekst is wel italic, dus het lijkt erop alsof er een anonymous element wordt aangemaakt.

[crisp]

Opera trapt er idd niet in, maar dat lijkt me echt een bug.
Ff 1.5 met een HTML4 Strict DTD doet het bij mij onder windows echter prima

[Verwijderd]

position:relative meegeven helpt

[_Thanatos_]

Hier ook niet. Opera 8.51 in XHTML 1.0 Transitional.

In Firefox 1.5 werkt het echter wel, maar alleen met een specifieke achtergrond, dus ook niet met background-color:inherit.

Cascading Stylesheet:

div#content a[rel=external]:after {
   content: ' [' attr(href) ']';
   font-style: italic;
   text-decoration: none;
   background-color: white;
}

Nu nog in Opera

Die position:relative meegeven helpt helaas ook vrij weinig in Opera...

[ Voor 13% gewijzigd door _Thanatos_ op 29-12-2005 17:39 ]

[Verwijderd]

_Thanatos_ schreef op donderdag 29 december 2005 @ 17:38:
Die position:relative meegeven helpt helaas ook vrij weinig in Opera...

Ow ik zie het het heeft alleen nut in Opera 9.0.

[crisp]

inherit werkt uiteraard alleen als de parent ook een specifieke background-color gespecificeerd heeft (of weer expliciet overerft van zijn parent).