Insert a Link Using CSS


I’m hand-maintaining an HTML document, and I’m looking for a way to automatically insert a link around text in a table. Let me illustrate:

<table><tr><td class="case">123456</td></tr></table>

I would like to automatically make every text in a TD with class “case” a link to that case in our bug tracking system (which, incidentally, is FogBugz).

So I’d like that “123456” to be changed to a link of this form:

<a href="">123456</a>

Is that possible? I’ve played with the :before and :after pseudo-elements, but there doesn’t seem to be a way to repeat the case number.


Not in a manner that will work across browsers. You could, however, do that with some relatively trivial Javascript..

function makeCasesClickable(){
    var cells = document.getElementsByTagName('td')
    for (var i = 0, cell; cell = cells[i]; i++){
        if (cell.className != 'case') continue
        var caseId = cell.innerHTML
        cell.innerHTML = ''
        var link = document.createElement('a')
        link.href = '' + caseId

You can apply it with something like onload = makeCasesClickable, or simply include it right at the end of the page.

Answered By – Dan

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.