Add a link href with css content

Question

I need to set an url after the class module-content, with pure css. This code doesn't work, but basically i need to set the Custom‌·Link in the content: ' ' attr(href);.

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

unsuccessful Jquery attempt:

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

Please elaborate a bit more on what exactly you're trying to do - your description is unclear to me. — Niels Keurentjes
– Niels Keurentjes, Commented May 6, 2013 at 23:24
So you need to replace Custom‌·Link with /joomla/index.php ? — Musa
– Musa, Commented May 6, 2013 at 23:25
Does this need to be done using CSS? It's a little unclear exactly what you're trying to do, but this feels like something that would be much simpler using JavaScript instead. — aroth
– aroth, Commented May 6, 2013 at 23:25
No, @Musa i just want to insert the url link of aidanews2_bottomlink after the .module-content. — user1311784
– user1311784, Commented May 6, 2013 at 23:27

aroth · Accepted Answer · 2013-05-07 23:33:07Z

1

This is perhaps more easily done using JavaScript/jQuery. That would be how I'd approach it, anyways.

If I understand your requirements correctly, you want to 1) fetch the href attribute on the link and 2) output it as text after the closing tag on the enclosing module-content div.

That can be accomplished with the following code:

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

Here's a live example: http://jsfiddle.net/ANZgE/2/

answered May 7, 2013 at 23:33

aroth

54.9k22 gold badges142 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian · Accepted Answer · 2013-05-06 23:29:29Z

0

This is what your HTML and CSS should look like:

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

The line content: ' ' attr(data-href); is looking for the attribute data-href in the element .module-content.

answered May 6, 2013 at 23:29

Brian

13.6k13 gold badges62 silver badges103 bronze badges

Collectives™ on Stack Overflow

Add a link href with css content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related