text-decoration on part of a link

[Tim Streater]

It is (as Safari is a *component* of my app). That fixes the example -
thanks - and many instances too in the "real-life" html but it looks
like that if the link has an inline style for text dec underline then
that defeats your fix <sob>.

Now now, don't cry, Auntie Dora has something more for you on
this, young man:

[data-phishtip]:hover {
...
text-decoration: none !important;
}

Does this mean "not important" ??

OK OK you win! Does this mean that the whole of CSS is free to be
ignored by a browser that got out of the wrong side of the bed? That
partied too hard last night and so has a hangover, as in "What? Render
that? Pay attention to *that* CSS? Have you seen the state I'm in? Oh,
you think it's important, eh? Well alright, but get me some strong
coffee."

<furtle, furtle> Hmm, I see. That should generally fix it but the
provider of the random junk can always win if they want to.

By the way, am I right in thinking that the way this tip business works
is that the :hover generates an empty element at the link, positioned
relative, and the :hover:before can at the same time generate a visible
element positioned absolute to that empty one? Otherwise the whole way
it works seems a bit mysterious to me.

Thanks for your help, btw.

 

[dorayme]

It is (as Safari is a *component* of my app). That fixes the example -
thanks - and many instances too in the "real-life" html but it looks
like that if the link has an inline style for text dec underline then
that defeats your fix <sob>.

Now now, don't cry, ... :

[data-phishtip]:hover {
...
text-decoration: none !important;
}

....

OK OK you win! ...
... I see. That should generally fix it but the
provider of the random junk can always win if they want to.

By the way, am I right in thinking that the way this tip business works
is that the :hover generates an empty element at the link, positioned
relative, and the :hover:before can at the same time generate a visible
element positioned absolute to that empty one? Otherwise the whole way
it works seems a bit mysterious to me.

:hover names a pseudo-class. It is a *class* on an element. The
elements having this class can pre-exist and be seen in the HTML
document. For example,

<p>paragraph text Š</p>

The class of hover belongs to *this* paragraph element when a
user hovers over the text. That is why (or partly why) it is a
pseudo class, it does not appear as class="" in the paragraph
mark-up. Before the hovering takes place it is a class on
something in a possible world. But soon as the hovering takes
place, the element acquires this class in this world. And then
the paragraph is styled according to the css for this class.

Now, about pseudo *elements*. In your case you create a pseudo
element with the :before. Not a class, it is an element of sorts.
It is an element which can have a class, it can be styled. Again,
it is pseudo because there is nothing relevant at all before
³This text² in

<p>This text</p>

in the HTML document. Something needs to be added on hovering,
sort of before it is styled, there needs to be the meat before
the cooking begins. So, in a sense you are right that something
is created. What in fact is created is a sort of inline - by
default - element rather like a span, a sort of anonymous box
next to the boxes that contain the main text in the HTML. It is
created and virtually placed before "This text" as would a span
be. The 'content:Š' CSS determines what goes in this virtual
element.

As for :before being empty at one point, this is fairly moot. You
can think of it being created empty and then filled with the bits
you have in content: "Š" or you can think of it as something
whose content is essential for its existence much like a dream
needing a dreamer, a dance needing a dancer.

positioned relative, and the :hover:before can at the same time > generate a visible element positioned absolute to that empty
one? Otherwise the whole way it works seems a bit mysterious
to me.

I think you sort of have the idea, anyway, the above is how is
would describe and understand the matter.

You might find a page I have on this informative or mildly
interesting.

http://dorayme.netweaver.com.au/css2Pseudo.html

Don't, of course, try looking at it in IE or at least not in
older IE, I have not bothered to tailor it for those browsers. It
might be OK in IE8 on (when not in compatibility mode).

 

[dorayme]

....

By the way, am I right in thinking that the way this tip business works
is that the :hover generates an empty element at the link, positioned
relative, and the :hover:before can at the same time generate a visible
element positioned absolute to that empty one? Otherwise the whole way
it works seems a bit mysterious to me.

[I was kindly informed that my last post had some character
encoding faults in it, so I am repeating some of the main things
here and fixing up some minor typos while at it, hope this post
looks OK.]

:hover names a pseudo-class. It is a *class* on an element. The
elements having this class can pre-exist and be seen in the HTML
document. For example,

<p>paragraph text...</p>

The class of hover belongs to the above paragraph element when a
user hovers over the text. That is why (or partly why) it is a
pseudo class, it does not appear as class="" in the paragraph
mark-up. Before the hovering takes place it is a class on
something in a possible world. But soon as the hovering takes
place, the element acquires this class in this world. And then
the paragraph is styled according to the css for this class.

Now, about pseudo *elements*. In your case you create a pseudo
element with the :before. Not a class, it is an element of sorts.
It is an element which can have a class, it can be styled. Again,
it is pseudo because there is no relevant *content* at all before
'This text' in

<p>This text</p>

in the HTML document.

Something needs to be added on hovering, sort of before it is
styled, there needs to be the meat before the cooking begins. So,
in a sense, you are right that something is created.

What in fact is created is a sort of inline - by default -
element rather like a span, a sort of anonymous box next to the
boxes that contain the main text in the HTML. It is created and
virtually placed before "This text" as would a span be. The
'content:...' CSS determines what goes in this virtual element.

As for :before being empty at one point, this is fairly moot. You
can think of it being created empty and then filled with the bits
you have in content: "..." or you can think of it as something
whose content is essential for its existence much like a dream
needing a dreamer, a dance needing a dancer.

You might find a page I have on this informative or mildly
interesting.

<http://dorayme.netweaver.com.au/css2Pseudo.html>

Don't, of course, try looking at it in IE or at least not in
older IE, I have not bothered to tailor it for those browsers. It
might be OK in IE8 on (when not in compatibility mode).

 

[Tim Streater]

...

By the way, am I right in thinking that the way this tip business works
is that the :hover generates an empty element at the link, positioned
relative, and the :hover:before can at the same time generate a visible
element positioned absolute to that empty one? Otherwise the whole way
it works seems a bit mysterious to me.

[I was kindly informed that my last post had some character
encoding faults in it, so I am repeating some of the main things
here and fixing up some minor typos while at it, hope this post
looks OK.]

:hover names a pseudo-class. It is a *class* on an element. The
elements having this class can pre-exist and be seen in the HTML
document. For example,

<p>paragraph text...</p>

The class of hover belongs to the above paragraph element when a
user hovers over the text. That is why (or partly why) it is a
pseudo class, it does not appear as class="" in the paragraph
mark-up. Before the hovering takes place it is a class on
something in a possible world. But soon as the hovering takes
place, the element acquires this class in this world. And then
the paragraph is styled according to the css for this class.

Now, about pseudo *elements*. In your case you create a pseudo
element with the :before. Not a class, it is an element of sorts.
It is an element which can have a class, it can be styled. Again,
it is pseudo because there is no relevant *content* at all before
'This text' in

<p>This text</p>

in the HTML document.

Something needs to be added on hovering, sort of before it is
styled, there needs to be the meat before the cooking begins. So,
in a sense, you are right that something is created.

What in fact is created is a sort of inline - by default -
element rather like a span, a sort of anonymous box next to the
boxes that contain the main text in the HTML. It is created and
virtually placed before "This text" as would a span be. The
'content:...' CSS determines what goes in this virtual element.

As for :before being empty at one point, this is fairly moot. You
can think of it being created empty and then filled with the bits
you have in content: "..." or you can think of it as something
whose content is essential for its existence much like a dream
needing a dreamer, a dance needing a dancer.

You might find a page I have on this informative or mildly
interesting.

<http://dorayme.netweaver.com.au/css2Pseudo.html>

Yes, OK with all of that. In my instance, I have a :hover and a
:hover:before. So I suppose the :hover makes the link element have
relative positioning, and then the pseudo-element created by
:hover:before has absolute positioning relative to the link. So it
floats above it.

 

[dorayme]

....


Yes, OK with all of that. In my instance, I have a :hover and a
:hover:before. So I suppose the :hover makes the link element have
relative positioning, and then the pseudo-element created by
:hover:before has absolute positioning relative to the link. ...

....

Yes, in your case something like that. You in fact specifically
attach a relative positioning on the [data-phishtip]:hover and
presumably in this new CSS3 the data syntax causes the class to
attach to whatever contains the data-phishtip="..." in the HTML.

Naturally, not all combinations of CSS were in the minds of the
inventors. There used to be the HTML attributes: link, alink,
vlink, which would be put on BODY; these were for the links
before any action, for activated (selected or click on and hold
down), and visited links. I don't know of any attribute for
hover, something everyone would want these days and easily
supplied (for links at least) with a CSS pseudo-class. And then
there are some pseudo-elements to supply various needs and these
can be styled.

Having got these extra classes to take over the styling, all
sorts of possibilities get opened up. Positioning
pseudo-elements! What was probably a simple inline mechanism to
shift a line of text left or right (and reflow whatever else to
accommodate) and add a bit of extra on an action, can be turned
into tricks with positioning. You might be surprised at how
different browsers react to these gymnastics, it is not all
smooth sailing as if it has all been thought through from the
beginning and there are total rights and wrongs. There is some
indeterminacy. As we have witnessed in this thread to some extent.

The reason :before is so named is it was expected to be inserted
in the flow before the original content. Similar remarks apply to
:after and to be seen in my above url. But once you start
*positioning* this pseudo element, its name becomes pointless,
because it can be positioned anywhere at all and relative to
almost anything. In fact, the :before element could be positioned
visually to after the original text and the :after to before!

You can push the boundaries of the original technology to do
various odd things, using these two pseudo elements. When you
position absolutely, you are just more than lucky to have the
two, rather than just one, both being as good as the other, both
as positionable as the other, the essential quality of them being
that they are created on an action rather than in the HTML doc.
Like identical ghosts for hire, you hire them to do any
particular scaring you want ... to make your mother-in-law leave,
to scare your teenage kids out of their complacency...