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

John Fisher
John Fisher
7,974 Points
Posted by John Fisher
John Fisher
7,974 Points

Styling the ::before and ::after Pseudo elements

Is it possible to style the before and after pseudo elements independently?

For example, I am using an icon (technically an embedded font) of a house, and would like it to use the ::before element to make it appear alongside the link in the nav bar "Home".

However, more specifically, I would like it to appear twice as large as the word "Home", and be placed above it also (as opposed to inline with it).

Is this possible?

abdulrazak awali
abdulrazak awali
4,793 Points

yes very possible like other html elements 

   div::after{
   content:'this is where the text/image stuff goes';
   color:#ffff22;
   margin:2px 4px;
}

apply any css style based on the content

1 Answer

John Fisher
John Fisher
7,974 Points
John Fisher
John Fisher
7,974 Points

Thanks for the answers.

I figured I could move the before and after by using display: block.

Ended up looking something like this, if it's helpful to anyone...

.my-style::before {
    font-family: icomoon;
    font-size: 330%;
    content: "\e902";
    display: block;
    padding-bottom: 6px;
}