My problem is pretty simple, but I cannot figure out a way to do it.
My goal is to make a title attribute of an anchor tag be able to contain a link. I also want to be able to style this title with CSS. One solution for this would be to somehow add an anchor within the title attribute of another anchor, which is not possible as far as I know. Another solution for this (that would work for me) is to be able to put an anchor tag within the "content" styler of my css, so I could make a pseudo 'anchor title' through CSS. As far as I know this is also not possible.
Here is a codepen of some code that may clarify: http://codepen.io/anon/pen/miabL
Here is the HTML of an example:
<a id = "anchor" data-title = "Here is some sample text. 'CLICK HERE.' Here is some more sample text."> Sample Anchor</a>
Here is the CSS that applies to the example above:
a[data-title]:hover:after {
content: attr(data-title);
background: purple;
color: white;
margin-left: 0px;
}
To put some further perspective on the issue, here is a link to the webpage I am trying to apply this to: http://somil.site11.com/programs.html I want a description to appear off to the right upon hover over each link. This description must be able to contain styles/links and must stick around either after you click on the link or if you mouse over to it after hovering over each corresponding link. There has to be multiple descriptions on the same page which is why I chose to use the title attribute as it sticks around upon hover over to it.
I suspect this may require javascript or jquery, which is fine, but a CSS/HTML solution is preferable. Thanks in advance.