Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- Pseudo-elements as a way to refer to content that does not exist in the source document.
- How to style the first letter or line of a text.
- How to use CSS to generate content before/after an element’s content.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/pseudo-elements.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
SCM Symposium PPT Format Customer loyalty is predi
10- Learn CSS Fundamentals / Pseudo-elements
1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-element
2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
“Pseudo-elements create abstractions about the document tree
beyond those specified 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.
3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Pseudo-elements
::first-letter
::first-line
::before
::after
4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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}
5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-ELEMENTS / FIRST-LETTER
<body>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Consequuntur eveniet dicta,
deleniti eos.</p>
<p>Debitis vitae minus magnam quod porro
numquam officia! Natus, culpa tenetur.</p>
</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 officia! Natus, culpa
tenetur.
READY TO USE CODE
6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Pseudo-elements
::first-letter
::first-line
::before
::after
7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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}
8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-ELEMENTS / FIRST-LINE
<body>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Consequuntur eveniet dicta,
deleniti eos.</p>
<p>Debitis vitae minus magnam quod porro
numquam officia! Natus, culpa tenetur.</p>
</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 officia! Natus, culpa
tenetur.
READY TO USE CODE
9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Pseudo-elements
::first-letter
::first-line
::before
::after
10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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}
11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-ELEMENTS / BEFORE
<body>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Consequuntur eveniet dicta,
deleniti eos.</p>
<p>Debitis vitae minus magnam quod porro
numquam officia! Natus, culpa tenetur.</p>
</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 officia! Natus,
culpa tenetur.
READY TO USE CODE
12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Pseudo-elements
::first-letter
::first-line
::before
::after
13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-ELEMENTS / AFTER
With this code all paragraphs are finished with ✔.
Describes generated content after an element’s content.
p::after {content: "✔"}
Syntax selector::after {style properties}
14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.
17. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
18. 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.
Learn front-end development at rocket speed
inarocket.com
19. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-element