Handige CSS codes om toe te voegen aan jouw website

Vrije regel na opsommingen

Een vervelende standaardinstelling is dat de tekst na een opsomming steeds onmiddellijk onder de opsomming “kleeft”. Dit los je eenvoudig op door onderstaande css-code te gebruiken:

ul li:last-child {
    margin-bottom: 1em; /* Pas de waarde aan naar de gewenste ruimte */
}

Vinkje als opsomming in plaats van bolletjes

Grafisch is het mooier om een vinkje te zetten. Onderstaande css-code is van toepassing op alle opsommingen waarbij je css klasse “vinkjes” toevoegt. Daarnaast kan je kleur, grootte en marges eenvoudig aanpassen in onderstaande code:

elementor-button a, ul a {
    text-decoration: none;
}
/* Alleen toepassen op opsommingen binnen elementen met de klasse 'vinkjes' */
.vinkjes ul {
    list-style-type: none; /* Verwijdert standaard bolletjes */
    padding-left: 20px; /* Laat de hele opsomming 20px inspringen */
    margin-bottom: 20px; /* Geeft 20 pixels ruimte onder de gehele lijst */
}

.vinkjes ul li {
    position: relative; /* Zorgt dat het vinkje correct geplaatst kan worden */
    padding-left: 25px; /* Ruimte tussen vinkje en tekst */
}

.vinkjes ul li::before {
    content: "✔"; /* Het vinkje */
    color: #0077D6; /* Kleur van het vinkje */
    position: absolute;
    left: 0; /* Plaats het vinkje relatief aan de opsomming */
    top: 3px; /* Laat het vinkje iets zakken voor betere uitlijning */
    font-size: 16px; /* Grootte van het vinkje */
    line-height: 1; /* Lijnt het vinkje uit met de tekst */
}

Linken onderlijnen

Heb je een WordPress-thema waarbij de linken niet onderlijnd worden, gebruik dan onderstaande css-code:

a { 
    text-decoration: underline;
}