Pseudo elementen

Met css pseudo-elementen kun je op een heel makkelijke manier zonder veel coderen in html visuele elementen toevoegen.
We gaan een svg image in css en een font-awesome icon toevoegen in zo’n pseudo element. Het voordeel van deze manier van werken is dat je met behulp van je stylesheet heel veel controle over de vormgeving van je website hebt zonder in de html te hoeven coderen. Bij buttons wordt veel gebruikt gemaakt van deze techniek om icoontjes toe te voegen. Ook kun je in je tekst kopjes voorzien van een icoontje als visuele aanduiding van het onderwerp van de tekst.

::before{ } en ::after{ }

Met de ::before en ::after pseudo elementen voeg je een extra layer toe aan je html element. In de HTML code bestaan deze elementen niet. Maar in CSS dus wel. Deze ::before en ::after kun je op alle HTML-tags toepassen die bestaan uit een start en een sluit tag. Bij een <img> tag werkt het niet, want die heeft geen sluit tag. Maar wel bijvoorbeeld bij een <h1></h1> of een <body></body>.

h1::before{
   content: 'Stukje tekst VOOR de h1 tag';
   color: green;
}
/* 
Een achtergrond plaatje toevoegen aan de H1 html tag
Deze ::after wordt dan een apart plaatje na de H1 tag
*/
h1::after{
   content: ''; /* de content blijft leeg, maar is wel nodig */
   background-image: url(images/mijn_achtergrondplaatje.jpg);
   background-size: contain;
   display: block;
   width: 30px;
   height: 30px;
}

! Leerdoel !

pseudo elementen ::before en ::after in CSS toe te passen op verschillende manieren
een svg als code in css te plaatsen.
Font-Awesome via CSS gebruiken
Creatief omgaan met code

! Theorie !
Pseudo classes en pseudo elementen

FontAwesome als icon in een pseudo element

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

h1::before{
   content:'\f588';/*grin-tears smiley*/
   display: inline-block;
   font-family: 'Font Awesome 5 Free';
   color: magenta;
}

https://fontawesome.com/icons
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

SVG afbeelding als code in background-image in CSS

https://websemantics.uk/tools/svg-to-background-image-conversion/

h1::after{
   content: ''; /* de content blijft leeg, maar is wel nodig */
   display:block;
   width: 30px;
   height: 30px;
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' enable-background='new 0 0 64 64' xml:space='preserve'%3E%3Cstyle%3E.style0{fill: %230073aa;}%3C/style%3E%3Cg%3E%3Cg%3E%3Cpath d='M4.548 31.999c0 10.9 6.3 20.3 15.5 24.706L6.925 20.827C5.402 24.2 4.5 28 4.5 31.999z M50.531 30.614c0-3.394-1.219-5.742-2.264-7.57c-1.391-2.263-2.695-4.177-2.695-6.439c0-2.523 1.912-4.872 4.609-4.872 c0.121 0 0.2 0 0.4 0.022C45.653 7.3 39.1 4.5 32 4.548c-9.591 0-18.027 4.921-22.936 12.4 c0.645 0 1.3 0 1.8 0.033c2.871 0 7.316-0.349 7.316-0.349c1.479-0.086 1.7 2.1 0.2 2.3 c0 0-1.487 0.174-3.142 0.261l9.997 29.735l6.008-18.017l-4.276-11.718c-1.479-0.087-2.879-0.261-2.879-0.261 c-1.48-0.087-1.306-2.349 0.174-2.262c0 0 4.5 0.3 7.2 0.349c2.87 0 7.317-0.349 7.317-0.349 c1.479-0.086 1.7 2.1 0.2 2.262c0 0-1.489 0.174-3.142 0.261l9.92 29.508l2.739-9.148 C49.628 35.7 50.5 33 50.5 30.614z M32.481 34.4l-8.237 23.934c2.46 0.7 5.1 1.1 7.8 1.1 c3.197 0 6.262-0.552 9.116-1.556c-0.072-0.118-0.141-0.243-0.196-0.379L32.481 34.4z M56.088 18.8 c0.119 0.9 0.2 1.8 0.2 2.823c0 2.785-0.521 5.916-2.088 9.832l-8.385 24.242c8.161-4.758 13.65-13.6 13.65-23.728 C59.451 27.2 58.2 22.7 56.1 18.83z M32 0c-17.645 0-32 14.355-32 32C0 49.6 14.4 64 32 64s32-14.355 32-32.001 C64 14.4 49.6 0 32 0z M32 62.533c-16.835 0-30.533-13.698-30.533-30.534C1.467 15.2 15.2 1.5 32 1.5 s30.534 13.7 30.5 30.532C62.533 48.8 48.8 62.5 32 62.533z' class='style0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

OPDRACHT 1
Maak een HTML pagina met daarin 3 x een <h1>

De eerste <h1> geef je met het ::before en het ::after pseudo element een extra stukje tekst mee. Maak deze tekst anders van kleur (in je CSS natuurlijk) dan de <h1> zelf.
De tweede <h1> voorzie je van een font-awesome icon. Hiervoor embed je dus font-awesome in je pagina en voeg je de font-awesome code toe aan je CSS.
De derde <h1> geef je met ::before een image icon van het type *.svg mee. Dit doe je met behulp van de svg to background image converter (https://websemantics.uk/tools/svg-to-background-image-conversion/). Met deze tool converteer je een svg gemaakt in bv illustrator naar een stukje CSS code. De code kopieer en plak je in jouw CSS.

OPDRACHT 2: button library
Maak je eigen button library met FontAwesome icons. Gebruik daarvoor de <button></button> of <a></a> tags. De font-awesome icons mogen niet als HTML worden toegevoegd maar via CSS met de ::after of ::before techniek. Maak minimaal 15 verschillende buttons met voor elke button een aparte class voor het icon en een generieke class voor de button. Hieronder staat een voorbeeld hoe je dat doet.
Geef ook de buttons een kleur die past bij de actie die bij de button hoort (verwijderen, opslaan, etc…). Zet je buttons allemaal op één HTML pagina.

.btn::before{
   display: inline-block;
   margin: 0 .5em 0 0;
   position: relative;
   color: #FFF;
}
.btn.facebook::before{
   content: '\f39e';/*de facebook code van FontAwesome*/
   background-color: blue;
}