What we did

April 2021:Pseudeo Elements and Classess

This month we looked at Pseudeo Elements and Classess. We started with a Instragram slide show "What are Pseudeo Elements in CSS".

The basics are a pseudo class uses a single colon : will an element has a double colon ::. These are the list of elements

1. ::before
2. ::after
3. ::first-line
4. ::marker
5. ::first-letter
6. ::selection

We created a page to show how they worked.

This is a before element.

h1::before { content: url(../images/logo_blue-circle-85.jpg); padding-right: 2em; }

This is the after element.

h1::after { content: url(../images/logo_blue-circle-85.jpg); padding-left: 2em; }

Here they are together

Here we have a First Letter element.It's like the illuminatedscript of old.

p::first-letter { color: #ff0000; font-size: 5em; font-family: "Palace Script MT"; font-weight: bold; padding-right: .1em; }

This is the First Line code.

p::first-line { color: #3366FF; font-variant: small-caps; }

We than looked at the marker code

::marker { color: red; font-size: 23px; }

Next we looked at Selection.

::selection { color: red; background: yellow; }

Next was the input Placeholder element.

input::placeholder { color: #009900; font-family: Tahoma; font-size: x-large; font-style: italic; }

Lastly we looked at a class Pseudeo element.

p.intro::first-letter { color: #00FF00; font-size: 5em; font-family: "Palace Script MT";}

Steve South
Web Design leader