use CSS to add links to text

Question

I want to transform all text within curly brackets into a link using CSS selectors. I could write it in JavaScript, but I'm wondering whether it can be added in CSS like this:

p:before {
    content: "<a href'http://example.com/t2'>";
}

p:after {
    content: "</a>";
}

The t2 in the href would be a copy of the text inside the curly brackets.

In the example above all of the text inside the p is transformed into a link, but is there a way to select only stuff inside curly braces?

Thanks for the edit - how do I put greater than signs into a question? — Matt Parkins, Dec 01 '12 at 12:26
Do you mean an anchor or hyperlink? If a hyperlink it should need a way to supply the url. — SaidbakR, Dec 01 '12 at 12:26
See this : http://stackoverflow.com/questions/4879719/insert-html-from-css — Vucko, Dec 01 '12 at 12:27
After @Vucko comment, I recommend to do it using Javascript is better. — SaidbakR, Dec 01 '12 at 12:30

score 5 · Answer 1 · answered Dec 01 '12 at 12:31

5

Simple answer: You can't, because this is not what Cascading Style Sheets are made for. Use JavaScript

answered Dec 01 '12 at 12:31

Michel Feldheim

17,625
5
60
77

score 2 · Accepted Answer · answered Dec 01 '12 at 12:33

2

It's generally a good idea to use Javascript for this kind of thing.

CSS is best suited for manipulating presentational aspects of your page.

What you're trying to do here is to manipulate the page content, for which Javascript is just the thing.

answered Dec 01 '12 at 12:33

Chamila Chulatunga

4,856
15
17

score 0 · Answer 3 · answered Dec 01 '12 at 13:58

0

CSS cannot be used to create links. Such things are best handled when generating the page, e.g. in server-side scripting. If you do it in client-side JavaScript, search engines will not see the links.

answered Dec 01 '12 at 13:58

Jukka K. Korpela

195,524
37
270
390

use CSS to add links to text

3 Answers3