10- Learn CSS Fundamentals / Pseudo-elements

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-element

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
“Pseudo-elements create abstractions about the document tree
beyond those speciﬁed by the document language. They may
also provide authors a way to refer to content that does not exist
in the source document.”
SOURCE: Selectors Level 3 by W3C.

Pseudo-elements
::ﬁrst-letter
::ﬁrst-line

::before

::after

PSEUDO-ELEMENTS / FIRST-LETTER
With this code the first letter of all paragraphs is shown in green.
Represents the first letter of an element, if it is not preceded by any other content on its line.
p::first-letter {color: green}
Syntax selector::first-letter {style properties}

HTML CSS
Browser
PSEUDO-ELEMENTS / FIRST-LETTER
<body>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Consequuntur eveniet dicta,
deleniti eos.
Debitis vitae minus magnam quod porro
numquam officia! Natus, culpa tenetur.
</body>
p::first-letter { color: red; }
Web page title
index.html
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
eveniet dicta, deleniti eos.

Debitis vitae minus magnam quod porro numquam oﬃcia! Natus, culpa
tenetur.
READY TO USE CODE

Pseudo-elements
::ﬁrst-letter

::ﬁrst-line
::before

::after

PSEUDO-ELEMENTS / FIRST-LINE
With this code the first line of all paragraphs is shown in green.
Describes the contents of the first formatted line of an element.
p::first-line {color: green}
Syntax selector::first-line {style properties}

HTML CSS
Browser
PSEUDO-ELEMENTS / FIRST-LINE
<body>
deleniti eos.
</body>
p::first-line { color: green; }
Web page title
index.html
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
eveniet dicta, deleniti eos.

Debitis vitae minus magnam quod porro numquam oﬃcia! Natus, culpa
tenetur.
READY TO USE CODE

Pseudo-elements
::ﬁrst-letter

::ﬁrst-line

::before
::after

PSEUDO-ELEMENTS / BEFORE
With this code all paragraphs are preceded by "★".
Describes generated content before an element’s content.
p::before {content: "★"}
Syntax selector::before {style properties}

HTML CSS
Browser
PSEUDO-ELEMENTS / BEFORE
<body>
deleniti eos.
</body>
p::before { content: "★"; }
Web page title
index.html
★ Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur eveniet dicta, deleniti eos.

★ Debitis vitae minus magnam quod porro numquam oﬃcia! Natus,
culpa tenetur.
READY TO USE CODE

Pseudo-elements
::ﬁrst-letter

::ﬁrst-line

::before

::after

PSEUDO-ELEMENTS / AFTER
With this code all paragraphs are ﬁnished with ✔.
Describes generated content after an element’s content.
p::after {content: "✔"}
Syntax selector::after {style properties}

HTML CSS
Browser
PSEUDO-ELEMENTS / AFTER
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
li::after { content: "✔"; }
Web page title
index.html
• Item 1 ✔

• Item 2 ✔

• Item 3 ✔
READY TO USE CODE

HTML CSS
Browser
PSEUDO-ELEMENTS / BEFORE + AFTER
<body>
<q>To be, or not to be,</q> Shakespeare
said, <q>that is the question.</q>
</body>
q::before { content: "“"; }
q::after { content: "”"; }
Web page title
index.html
“To be, or not to be,” Shakespeare said, “that is the question.”
READY TO USE CODE

REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
inarocket.com

10- Learn CSS Fundamentals / Pseudo-elements

More Related Content

What's hot

Similar to 10- Learn CSS Fundamentals / Pseudo-elements

More from In a Rocket

Recently uploaded

10- Learn CSS Fundamentals / Pseudo-elements