如何在after伪元素中应用url路径？ [英] How to apply a url path in after pseudo element?

问题描述

我有以下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;
}

如何制作 h3：背景后 可点击？

请注意我无法包装 h3标签带标签

如果不可能，我如何使用jquery为此分配href？

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

推荐答案

CSS无法实现，一个jQuery解决方案看起来像这样：

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);

然后你将你的CSS更改为：

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;
}

这篇关于如何在after伪元素中应用url路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！