CSS Selectors Advanced Selectors Pseudo Elements Challenge (4 parts)

Link to Challenge:

http://teamtreehouse.com/library/css-selectors/advanced-selectors/pseudoelements-challenge

Challenge Task 1 of 4

Let's use pseudo-elements to create a progress bar from a single element. First, in the top .progbar selector, add the pseudo-element that will insert content after the progbar element.

Challenge Task 2 of 4

In the same rule, add the property that lets us insert content into an element. The value should be an empty set of quotes.

Challenge Task 3 of 4

Next, in the second .progbar selector, add the pseudo-element that will insert content before the progbar element. Don't forget to write the content declaration on line 13.

Challenge Task 4 of 4

Finally, create a new rule that will insert a pseudo-element after an a element. As the content value, define a CSS function that will insert an href attribute's value as content.

First of all this is NOT a beginner course

Should a course be called a "beginner" course if it has a section

called: "Advanced Selectors"?

Secondly there are only a handful of Treehouse forum threads on this brand spanking new course at this point:

https://teamtreehouse.com/forum/syllabus:1142

..and this challenge is the hardest of all of them for the course.

The toughest part of the first 3 challenges is that there isn't a lot of pseudo element selectors code out there are the internet and the words used in the question where relatively generic, making google search keyword "hits" difficult.

The last part left me guessing, but I figured it was something to do with 'attr' since it was the last thing discussed and they really didn't challenge test it anywhere else but in this last challenge.

This two pages provided code snippets that where close:

This page:

http://davidwalsh.name/css-content-attr

..provided a similar word matching to the challenge question:

In the case that you'd like to use an element attribute as content (this being the dynamic usage of content), you may do so with the attr expression

This page:

http://www.w3schools.com/cssref/pr_gen_content.asp

..gave me a reasonably close attr code snippet::

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

So in the end the code to pass all the parts of the challenge turned out to be:

/* Complete the challenge by writing CSS below */

.progbar {
 ---
}

.progbar {
 ---
}

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

//the line that made me think a little..
---

Some helpful links for the earlier challenges:

https://teamtreehouse.com/forum/attribute-selector-with-img-test-question-is-failing-my-answer

http://www.w3schools.com/cssref/css_selectors.asp

http://css-tricks.com/pseudo-element-roundup/

http://css-tricks.com/almanac/selectors/a/after-and-before/

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors