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

Amber Hoddinott
Amber Hoddinott
6,494 Points

Would someone please be able to explain to me how this css works, and why it underlines? :)

Hi i have found the answer to css styling i have been trying to do, but i dont understand how it works, i was hoping someone might be able to explain to me why this css underlines? Maybe i have missed something but i thought :after was used when something has had an action happen to it, for example if a link is clicked on you can change the color using the :after pseudo css. Therefore im confused to why this underlines?

Thank you in advance.

http://jsfiddle.net/9e27b/

3 Answers

Hi Amber,

h1:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}

This code isn't the best example of the :before pseudo classes as you've already got another styling controlling the position of the element; position: absolute. So, you could use the :after class here and it would still show the same way.

:after literally just places something after the given element (here, the h1 tag), and :before would just place something before.

It's got nothing to do with interactive states, such as :hover, :focus, :active, and so on. It's just about positioning an object on the page.

A good example is if you had a bulleted list, but you wanted to use custom images for the bullets. You could write your list, and then write something like:

li:before {
    content: "your chosen bullet image";
    padding-right: 10px;
}

to place your custom bullet before each list element, with a bit of spacing in between.

Hope that helps,

Ede

Hi Amber!

I'm not great at CSS, I'm afraid. However, the pseudo elements ::before and ::after, I thought, we positioning rules such that you could do something like:

h1::before {
  content: "dog.jpg";
}

which would position an image before the h1 element. Your question mentions visited links etc. I think that's a different pseudo element, :visited and others like :hover.

Again, I'm not great with CSS but those are my thoughts.

Steve.

Amber Hoddinott
Amber Hoddinott
6,494 Points

Thanks Ede, :) yes this helped alot... we are all learning constantly!! I will remember this for my next project as i would like to use custom bullet points in that! Thank you AMBER