Pseudo-Elements in CSS Challenge

Challenge [optional]

Challenge #1

Use what you've learned about CSS pseudo elements and the content property to add your favorite emojis to the headings of your class website.

Challenge #2

Create CSS styles that will allow you to add an emoji to parts of your website to show your feelings about the assignment. For example, you might use:

Class 5 Redux

For homework this week we worked on the Simmons Academics page again! Dane is the würst!

Resources for Challenge

You can find several neat examples of things that are possible to do using pseudo elements in this article from CSS Tricks . The following articles should give you some more background and insight on how to use pseudo elements and the content property:

Learning To Use The :before And :after Pseudo-Elements In CSS
Understanding Pseudo-Element :before and :after Gives some practical examples of using them
Understanding the CSS ‘content’ Property
Chart of all of the Unicode emojis

Inserting special characters via the content property can be a little bit tricky. You must use the UTF-8 (Unicode) encoding to reference them. For example I might find the following list of Unicode symbols from Wikipedia :

Official Name	Glyph	Unicode #	HTML	Common meaning
Black sun with rays	☀	U+2600	☀	Clear weather
Cloud	☁	U+2601	☁	Cloud, cloudy weather
Umbrella	☂	U+2602	☂	Umbrella, rainy weather

To use the umbrella symbol in your CSS, you would have to use the Unicode number, but without the "U+". You also have to add a backwards slash to the beginning of the numbers. Here's an example using the three symbols above:

p:before {
  content: "\2600";     /* Black sun */
}
small:before {
  content: "\2601";     /* Cloud */
}
h4:before {
  content: "\2602";     /* Umbrella */
}