CSS Truc: Hoe maak je een border korter

Vaak is het mooier om een stukje tekst af te sluiten met een klein lijntje onderaan. Zie dit voorbeeld hieronder. Dit kun je doen door wat extra html toe te voegen zoals een <hr> of een <div class=”line”/> en vervolgens dit in je stylesheet bij te werken. Maar een makkelijkere manier is om alles in je stylesheet te doen met 2 simpele stappen. Stap 1: Maak de positie van het object relatief.

.widget-title{
    position:relative;
}

Stap 2: Maak de after selector van het object absoluut en geef deze de juiste lengte en kleur.


.widget-title:after{
    position:absolute;
    width:50%;
    height:2px;
    background:red;
    content:'';
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

 
Voor het complete voorbeeld zie https://jsfiddle.net/sivard/1rua7gb9/16/