Nested text links in HTML

Question

In HTML nested links are not permitted. However, for my purpose (text notes which sometimes refer to whole sentences and sometimes to just one single word within already anotated sentences) I need them. So I have to find a way to solve this problem.

However, all I have now is a basic idea on how it should look and behave. The following mock up shows two links: one to target A, one to B. The "outer" a link is, the lower is the line under it. A is the outer link, thus, its line is lower than that of B. Clicking on the lines of a link should always lead to the target of that link - even if the text above that line is the text of an inner link.

I've tried to show that intended behaviour with hover colors: Blue for A, pink for B.

Any ideas how I could realize this in HTML with the help of CSS (and maybe SVG?). I'd prefer solutions without scripting, but any suggestions are welcomed.

Answer 1

You can use <span>s inside links:

a {color: #00f; border-bottom: 1px solid; text-decoration: none;}
a span {color: #66f; text-decoration: underline;}

<a href="#">Hello, this is link. This is <span>inner link</span> here.</a>

A small problem or extra work is, you need JavaScript to make them follow the links.

But as you asked, you can get the UI Effect without any scripting, but the following of link, definitely needs scripting!