Css links inside text

Question

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.

score 5 · Answer 1 · answered Aug 07 '12 at 04:37

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:02

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

score 1 · Answer 3 · answered Aug 07 '12 at 04:42

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/

score 1 · Answer 4 · edited May 23 '17 at 10:24

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

edited May 23 '17 at 10:24

Community

1
1

answered Aug 07 '12 at 04:45

RDX RaN

197
3
20

Css links inside text

4 Answers4

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

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