1

This might be simple to answer ..I have a div inside which I have some text and in that text there can be some links also eg hello http://google.com hello http://bing.com.

The question is how can I make those links appear as hyperlinks using css.

Thanks

edit:

I just saw that after posting this question the links were automatically displayed as hyperlinks.I need the same thing.

Rob
  • 415,655
  • 72
  • 787
  • 1,044
user505210
  • 1,362
  • 11
  • 28
  • 50

4 Answers4

5

That's not a requirement that CSS can solve AFAIK. You need to use something like Javascript to process the text inside the DIV to find things that are URL-like and put anchor tags around them. In the case of what happened when you submitted your answer, my guess would be that the server-side code on Stackoverflow did the same thing, just on the server not rendered live in your browser.

Adrian
  • 2,825
  • 1
  • 22
  • 32
1

There isn't a pure CSS solution to turning URLs into links.

Here is an example of a PHP code snippet that does exactly that: http://css-tricks.com/snippets/php/find-urls-in-text-make-links/

And this SO answer has a solution using Javascript, which is arguably more elegant:

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

https://stackoverflow.com/a/37687/1512956

Community
  • 1
  • 1
Marcelo De Polli
  • 28,123
  • 4
  • 37
  • 47
1

try this one

<style type="css/text">
A:link {text-decoration: none}
A:hover {text-decoration: underline;}
</style>
<body>
<div id="link">
   <A href="http://www.google.com">Google</A>
   <A href="http://www.yahoo.com">yahoo</A>
</div>

DEMO http://jsfiddle.net/rSpMV/1/

1

You need to use something like javascript to solve this issue.

just like this:

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

Please check this: stackoverflow question

Community
  • 1
  • 1
RDX RaN
  • 307
  • 4
  • 20