10- Learn CSS Fundamentals / Pseudo-elements
0 likes118 views
The document provides an overview of CSS pseudo-elements, detailing their usage and syntax for customizing the appearance of HTML elements. It explains the functions of ::first-letter, ::first-line, ::before, and ::after, including examples of how to implement them in code. Additionally, the document promotes an online course at inarocket.com for learning front-end development with a focus on practical coding and real project applications.
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