CSS - nested anchor tag link

Question

I would like to create nested link inside a <a> tag

Example:

<a href="#">This is a link <a id="sup">sup text</a> end of the link</a>

css:

a#sup{
    color:#19578e;
    font-family: Verdana;
    font-size: 8pt;
    vertical-align: top;
}

a {
    font-family: Arial;
    color: #19578e;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

However, like that only the "This is a link" point to the link...

Answer 1

Use a SPAN, since you cannot nest anchor tags.

<a href="#">This is a link <span id="sup">sup text</span> end of the link</a>

Ok I'll use span, but how to make the span having the same propreties than anchor tag when anchor tag is hover ?

Add the hover state to your CSS for the "sup" element.

a, a:hover #sup {
    font-family: Arial;
    color: #19578e;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

If you have this in more than on place, you can simply use:

a, a:hover span { ... }

Answer 2

You can't have a tags inside another a tag because Nested Links are illegal

You may use instead an <span> tag to make it work:

<a href="#">This is a link <span id="sup">sup text</span> end of the link</a>