:before en :after in de praktijk

In de vorige blog “CSS Tips and Tricks” is er verteld over het maken van een driehoek met het CSS-element “:before”. De :before- en :after-elementen hebben oneindig veel mogelijkheden wat ermee gedaan kan worden. In deze blog worden verschillende toepassingen uitgelegd die zijn gebruikt op websites.

1. Ticketbar: ticket-effect in menu

Op de site van Ticketbar (http://amsterdam.ticketbar.eu/) is in de header een menu gebruikt. Wanneer er met de muis over de menu-items wordt bewogen wordt het geselecteerd item oranje. Bij de twee buitenste menu-items wordt de rand getoond alsof het een ticket is. De ‘hap’ uit de ticket is gedaan door middel van :before en :after.

Om dit effect te creëren is het after-element een cirkel geworden met dezelfde kleur als de achtergrond. De cirkel is zo gepositioneerd dat de helft van de cirkel op de buitenrand van het menu-item staat. Hieronder staat de CSS-code van het after-element:

#main-nav li.hover:nth-child(2):after, #main-nav li.active:nth-child(2):after {

    left: -7px;

}

#main-nav li.hover:nth-child(2):after, #main-nav li.active:nth-child(2):after {

    content: '';

    display: block;

    position: absolute;

    top: 13px;

    width: 14px;

    height: 14px;

    background-color: #00154d;

    border-radius: 10px;

}

Wanneer de “background-color” wordt aangepast naar bijvoorbeeld wit is het duidelijk te zien hoe het element eruit ziet.

2. Handicare: Pijl in button-class

Op de site van Handicare (https://handicare-trapliften.nl/) zijn verschillende buttons te vinden met een pijl naast de tekst. Deze buttons zijn eigenlijk anchors die gestijld worden door de class “button” aan toe te voegen.

De pijl is in een :after-element verwerkt, omdat de pijl alleen getoond moet worden wanneer een anchor de class “button” krijgt. Hieronder staat de gebruikte CSS-code voor het maken van de buttons met pijl.

a.button {

    font-size: 17px;

    color: #fff;

    background-color: #0094d0;

    padding: 15px 60px 15px 15px;

    cursor: pointer;

    position: relative;

    display: inline-block;

    text-decoration: none;

    transition: background-color .2s;

    -webkit-transition: background-color .2s;

    -moz-transition: background-color .2s;

    -o-transition: background-color .2s;

}

a.button:after {

    content: '';

    display: block;

    background-image: url(/img/newdesign/button-arrow-right-icon.png);

    background-size: contain;

    background-repeat: no-repeat;

    width: 22px;

    height: 19px;

    position: absolute;

    top: 18px;

    right: 18px;

}

3. LEOXX: Invliegende underline bij hover

Op de voorpagina van LEOXX (https://leoxx.nl/) is een effect toegevoegd aan de “Lees meer”-links. Wanneer er met de muis over deze links wordt bewogen, komt er een lijn van onder naar boven die als underline van de tekst fungeert. Deze lijn is gemaakt door gebruik te maken van een :after-element.

Het invliegende effect wordt gedaan door middel van de CSS-code “transition”. Met transition kunnen veranderingen van HTML-elementen in een vloeiende animatie getoond worden. De volgende CSS-regels zorgen voor deze animatie op leoxx.nl:

.frontPage #content #area3 div:nth-child(3) p:last-of-type {

    display: block;

    padding-bottom: 10px;

    bottom: 0;

    overflow: hidden;

    text-transform: uppercase;

    font-weight: 800;

    position: absolute;

    bottom: 10px;

    font-family: 'Raleway',sans-serif;

    margin: 0;

}

.frontPage #content #area3 div:nth-child(3) p:last-of-type::after {

    content: "";

    display: block;

    width: 100%;

    border-top: 1px solid #000;

    position: absolute;

    bottom: -1px;

    transition: bottom .2s;

    -webkit-transition: bottom .2s;

    -moz-transition: bottom .2s;

    -o-transition: bottom .2s;

}

.frontPage #content #area3 div:nth-child(3) p:last-of-type:hover:after {

    bottom: 13px;

}