Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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?

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