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 CSS Selectors Advanced Selectors Pseudo-Elements Challenge

Challenge times out without completing

I have tried repeated times to complete this Challenge but it times out every time. So I don't know if I have and error or there is a network problem or some thing.

style.css
/* Complete the challenge by writing CSS below */

.progbar::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
    background-color: #5ece7f; 
}

.progbar::before {
  content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 49%;
    top: -9px;
    background-color: #7dd898; 
}

.progbar {
  height: 6px;
  border-radius: 3px;
  background: #d6d7d9;
  position: relative;
  margin-bottom: 3.875em; 
}

a::after {
  content: url(https://teamtreehouse.com)
}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progbar"></div> 
    <a href="http://teamtreehouse.com">Check out the URL: </a>
</body>
</html>

2 Answers

Steven Parker
Steven Parker
229,783 Points

:warning: SPOILER ALERT

I'm not sure why it times out, maybe it's trying to include the entire treehouse web page as the content. But the challenge is asking you to use the value of the href attribute (of the a tag) as the content. The CSS function that returns the value of an attribute is attr(). So your CSS would look like this:

a::after {
  content: attr(href);
}

Steve:

Thanks. A newbie mistake. I was trying to follow the img examples from the course work.

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

What times out you mean when you try to submit your answer it just hangs then eventually gives a time out error?

This is going to sound like a brain dead answer but clear cache, the start browser backup and try again. Are you able to get to other websites, especially ones you never go to without big lags? For example, I don't know, how about https://www.yahoo.com?