This question already has an answer here:

CSS After Element to insert mailto link? 5 answers

META: This document was marked as a duplicate, and I was suggested to create another post instead, which is what I did here: How to get hyperlinks inside a "pop-up" term reference on mouse-over, and seperate the HTML term from the "pop-up" reference content. I also, then, realized it was a good idea to formulate the goal of the application better.

As a reflection: I think it can be difficult, especially for unexperienced users, to choose a good trade-off between specificity on the 1 hand, and goal-orientation on the other. My apologies for any trouble. Many thanks for the help.

---

Is it possible to have a hyperlink inside the CSS-syntax {content:"..."}? How would one go about creating such a link?

As an example, here is a piece of code I created, to have a term decription on mouse-hover:

HTML

<br><term id="HPV">HPV</term>

CSS

term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted}

term:hover{text-decoration:none; color:#aaaaaa}

term#HPV:hover:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black}

term#HPV:hover:after{content:"Human papillomavirus."}

My wondering is about how to get "Human papillomavirus." hyperlinked?

回答1:

There is no solution for this with css. anything inside content will not be html markup, its only text. so you could probably add an html element on hover which links to another url. for example http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<a href="google.com">click me</a>');;
    },function(){

    });
});

回答2:

"Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file." Copied from here