Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points

How did the old CSS-Tricks do thing were the heading and the button was the same link

I'm not sure if anyone can remember the old CSS-Tricks where the heading and the read more button shared the same link but there was a paragraph in the center that was not a link, in the last version before this one. If it was done with CSS could you please explain.

Thanks.

3 Answers

Sean Gaffney
seal-mask
.a{fill-rule:evenodd;}techdegree
Sean Gaffney
Front End Web Development Techdegree Student 2,560 Points
Sean Gaffney
.a{fill-rule:evenodd;}techdegree
Sean Gaffney
Front End Web Development Techdegree Student 2,560 Points

Hey Enrique, it's because of this little bit of CSS-trickery (:wink:) right here:

article {
  position: relative;
}

article h2 a span {
  position: absolute !important;
  bottom: 0;
  top: auto !important;
  left: 0;
}

If you look at the HTML, it has the button inside of the h2 a, which Chris then absolutely positions at the bottom of the article section. So, when you hover over the button, it triggers the :hover pseudo-class on the link.

<article class="post" id="post-17588">
  <h2>
    <a href="/a-discussion-about-css-reusability/">
      A Discussion About CSS Reusability
      <span class="button">Read on! &rarr;</span>
    </a>
  </h2>
  ...
</article>

Pretty neat little trick, eh?

Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points
Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points

OH!!!!!!! I see now, thanks, that's awesome!!!