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

Amber Hoddinott
Amber Hoddinott
6,494 Points
Posted by 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

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

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

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

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
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