在CSS中添加带有href链接的内容

Question

我需要使用纯CSS在类module-content后面设置一个URL。这段代码不起作用，但基本上我需要在content: '' attr(href);里设置自定义链接Custom‌·Link。

<div class="module-content">
   <div class="aidanews2" style="clear: both;">
      <div class="aidanews2_art aidacat_2 aidapage105 hidepiece odd first" style="clear: both; display: block;">
      <div class="aidanews2_art aidacat_2 aidapage105 hidepiece even last" style="clear: both; display: block;">
   </div>
   <div class="aidanews2_bottomlink">
      <a href="/joomla/index.php">Custom‌·Link</a>
   </div>
</div>

---

.moduletable>.module-content:after{
    background: none repeat scroll 0 0 #050505;
    content: ' ' attr(href);
}

未成功的Jquery尝试:

var a = $('.aidanews2_bottomlink').html();
var b = $('.top-1 > .moduletable > .module-content:after ').html(a);

- user1311784

---

所以你需要用/joomla/index.php替换Custom‌·Link吗？ - Musa

需要使用CSS来完成吗？不太清楚您具体想做什么，但感觉使用JavaScript会更简单一些。 - aroth

不，@Musa我只想在.module-content后插入aidanews2_bottomlink的URL链接。 - user1311784

JavaScript/jQuery 无法访问 HTML 伪元素。 - Nahydrin

也许这个是你需要的？ - aroth

Answer 1

也许最好使用JavaScript/jQuery来完成这个任务。无论如何，这是我处理的方式。

如果我正确理解你的要求，你想要1)获取链接上的href属性，2)在封闭的module-content div标签后输出它作为文本。

以下代码可实现此目的：

//get the text
var content = $(".aidanews2_bottomlink a").attr('href');  

//append it after the containing element
$(".aidanews2_bottomlink").parents(".module-content").eq(0).after(content);  

这里有一个实时例子：http://jsfiddle.net/ANZgE/2/。

- aroth

Answer 2

这是你的HTML和CSS应该看起来的样子：

<div class="module-content" data-href="/joomla/index.php">
   <div class="aidanews2" style="clear: both;">
      <div class="aidanews2_art aidacat_2 aidapage105 hidepiece odd first" style="clear: both; display: block;">
      <div class="aidanews2_art aidacat_2 aidapage105 hidepiece even last" style="clear: both; display: block;">
   </div>
</div>

 

.moduletable > .module-content:after{
    background: none repeat scroll 0 0 #050505;
    content: ' ' attr(data-href);
}

content: ' ' attr(data-href); 这一行代码是在元素 .module-content 中查找属性 data-href。

- Nahydrin