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 CSS Foundations Advanced Selectors Pseudo-Elements: ::before and ::after

Hi i didn't understand when you put de unicode because i serch unicodes but i dont know how to put they in the css

Hi i didn't understand when you put de unicode because i serch unicodes but i dont know how to put they in the css

5 Answers

Wayne Priestley
Wayne Priestley
19,567 Points

Hi German,

Sometimes when we need to use a symbol like for instance the copyright symbol on our websites we have to use code to do so as the copyright symbol is used in CSS for media queries. So if we just used the symbol the CSS would think we were writing a piece of code and wouldn't know we're infact just trying to write some copyright text.

There are loads of symbols out there, and a quick Google for html symbols will show you links to many lists showing the symbols as well as the code needed to insert them into your code.

You won't always need to use a pseudo element to use these symbols, Nick used them specifically to place the phone symbol just before the phone number in his code as he wanted it to appear a specific way, with the phone symbol just before the number, that's why he used a pseudo element, for positioning. There are different ways to achieve the same effect.

Most of the time you may want to use the symbols to add normal things like quotation marks, ampersands or exclamation marks to text in your html. In this case you would just write the code inline with your text and it would appear as a ampersand or whatever when you viewed your webpage in a browser.

For example:

Red & White would look like this: Red & White

Hope this helps.

Wayne Priestley
Wayne Priestley
19,567 Points

Hi German,

Can you post a link to the question your having trouble with in the code challenge please.

Pseudo-Elements: ::before and ::after in this video when he put the phone ico before the phone number i don'tknow how to use unicode in css :S

icon*

thanks!