:before en :after in de praktijk

Geschreven door: op maandag 17 oktober 2016

Leestijd:

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.

ticketbar-menu.jpg

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.

ticketbar-menu-edited.jpg

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.

handicare-button.jpg

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.

leoxx-read-more.jpg

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;

}


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
allrig.jpg
aliancys.jpg
eriks.jpg
heinen_en_hopman.jpg
handicare_stairlifts.jpg
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail