2

I have the following css

#custom-module .moduletable:nth-child(2) h3 {
    background: url(../images/icon-news.jpg)no-repeat center left;
    position: relative;
}
#custom-module .moduletable:nth-child(2) h3:after{
    background: url(../images/icon-all-news.jpg) no-repeat right center;
    content: url(www.google.com);
    position: absolute;
    width: 22px;
    height: 9px;
    top: 10px;
    right: 0;
}

How can I make h3:after background clickable?

Please note I can't wrap the h3 tag with a tag

If its not possible, how can I assign this a href using jquery?

Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68

1 Answers1

2

Not possible with CSS, a jQuery solution would look something like this:

var $link = $('<a>',{
    class: 'all-news-link',
    href: 'http://google.com'
});

$('#custom-module .moduletable:nth-child(2) h3').append($link);

Then you'd change your CSS to:

#custom-module .moduletable:nth-child(2) h3 .all-news-link{
    background: url(../images/icon-all-news.jpg) no-repeat right center;
    position: absolute;
    width: 22px;
    height: 9px;
    top: 10px;
    right: 0;
}
omma2289
  • 54,161
  • 8
  • 64
  • 68
  • what's the result? is the element being added? what happens when you click? – omma2289 Sep 08 '13 at 08:13
  • @NavinRauniyar how does it look then? can you right-click it and select the "Inspect element" option and see if everything looks ok there? – omma2289 Sep 08 '13 at 08:15
  • @NavinRauniyar are you sure there's an element in your page that matches the selector `#custom-module .moduletable:nth-child(2) h3`? can you post your HTML markup, preferably in a fiddle? also try adding display:inline-block to the CSS – omma2289 Sep 08 '13 at 08:46
  • yes, you can build html nodes that way, try adding this to the code to see if we're matching any elements `alert($('#custom-module .moduletable:nth-child(2) h3').length);` also are you placing the code inside your `$(document).ready(function(){})`? – omma2289 Sep 08 '13 at 09:04
  • @NavinRauniyar, it is being appended and wrapped but the fiddle doesn't have the styles so you don't see it, check this one http://jsfiddle.net/koala_dev/66KaJ/2/ – omma2289 Sep 08 '13 at 09:14
  • @NavinRauniyar wait a minute, do you want to wrap the whole `

    ` in a link? I just created a new element to reproduce what you were trying to do with the :after in CSS

     – omma2289 Sep 08 '13 at 09:17
  • Oh! It was my big mistake I din't place css for that. Should I remove :after ? – Navin Rauniyar Sep 08 '13 at 09:18
  • @NavinRauniyar yes the :after in the CSS is not needed anymore – omma2289 Sep 08 '13 at 09:20