Blockquotes citaten aanpassen met CSS

Logo cursus traing wordpress

Blockquotes citaten aanpassen met CSS

Methode 2: Voeg CSS toe voor stijl van Blockquotes

Als u geen WordPress-plug-in wilt gebruiken, is het toevoegen van aangepaste CSS een andere manier om uw blockquote aan te passen.
Lees daarvoor deze handleiding: Beste websites CSS html zelf te leren online beginners

Voeg de onderstaande code toe aan je CSS

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 450px;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    background:#ececec;
}
 
blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -10px;
    top: -10px;
    color: #7a7a7a;
}
 
blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
 
blockquote cite:before {
    content: "\2014 \2009";
}

See the Pen Custom BlockQuotes by Habdul Hazeez (@ziizium) on CodePen.

https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/#h-icon-bullet-list

Meer weten over Blockquotes citaten aanpassen met CSSof info?

Wil je meer weten? Veel lezers met interesse in Blockquotes citaten aanpassen met CSS bekeken ook de onderstaande artikelen:


Scroll naar boven