0

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?

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28

2 Answers2

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

Community
  • 1
  • 1
Isak
  • 365
  • 3
  • 11
  • I can find no way to do that. Since the text that needs to get a hyperlink, is not visible in the pure HTML. The reason for this, is that this text is specified in CSS by the `...:after`-syntax. – O0123 Jan 22 '15 at 11:49
  • I can't seem to understand just what you're looking for? Why wouldn't a simple `Send me a mail!` work? Refer to http://www.w3schools.com/tags/tag_address.asp – Isak Jan 22 '15 at 11:53
  • @Isak.. its not element..its setting an element inside another using css property `content` – Naeem Shaikh Jan 22 '15 at 11:55
0

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(){

    });
});
Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
  • You mean, with javascript, like in the [post](http://stackoverflow.com/questions/165082/insert-a-link-using-css) mentioned above? --- I am beginning to think my question is a duplicate ... – O0123 Jan 22 '15 at 11:45
  • no not a duplicate but its very similar – Naeem Shaikh Jan 22 '15 at 11:46
  • Hi @Naeem, thank you for your help. Are you getting any output on your JSFiddle? – O0123 Jan 22 '15 at 11:51
  • @VincentVerheyen.. sorry the css was missing. edited now – Naeem Shaikh Jan 22 '15 at 11:52
  • I very much appreciate your help. Your MWE is working great. However, I can't get this to work with my original example question. --- Further more, this post seems to be marked as a duplicate. Can you verify that or reason why it perhaps isn't, since you are a much more experienced user than me? I find it very hard to sort out. --- If this is a duplicate, I will delete the post. --- Thanks again. – O0123 Jan 22 '15 at 12:29
  • The new question is here: http://stackoverflow.com/questions/28089638/put-a-hyperlink-inside-after-the-content-of-a-css-after-selector. – O0123 Jan 22 '15 at 13:13