Beautiful Blockquotes with CSS ::before Pseudo-Element

Today, we’ll explore how to design blockquotes using the CSS ::before pseudo-element. This straightforward yet versatile element allows designers to add styling or insert content before an element’s main text, without modifying the HTML markup. Let’s see how you can combine it with other CSS properties to create visually appealing blockquotes that can enhance your web content.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Implementing the Blockquotes

We’ll start by setting up our HTML structure. We will use the blockquote HTML element, styled with a CSS class named .custom-blockquote.

<blockquote class="custom-blockquote">
  Creativity involves breaking out of established patterns to look at things in
  a different way.
  <span>Don Norman</span>
</blockquote>

Once we have our structure set up, let’s move on to the CSS. The ::before pseudo-element will play a key role in adding a unique design element to our blockquote.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700');</pre>
.custom-blockquote {
font-size: 1.4em;
width: 60%;
margin: 50px auto;
font-family: Open Sans, sans-serif;
font-style: italic;
color: #555555;
padding: 1.2em 30px 1.2em 75px;
border-left: 8px solid #FFA07A;
line-height: 1.6;
position: relative;
background: #EDEDED;
}

.custom-blockquote::before {
content: "\201C";
color: #FFA07A;
font-size: 4em;
position: absolute;
left: 10px;
top: -10px;
font-family: Arial, sans-serif;
}

.custom-blockquote span {
display: block;
color: #333333;
font-style: normal;
font-weight: bold;
margin-top: 1em;
}

Understanding the Key Aspects

Our CSS code incorporates various elements to enhance the design of our blockquote. Here’s an explanation of the crucial aspects:

• The ::before pseudo-element: This element adds a large, stylized opening quotation mark before the blockquote’s text. We set its font-family to Arial to create a distinct look. The content property is used to insert the quotation mark, and the color property is set to #FFA07A, matching the color of the blockquote’s left border.

.custom-blockquote::before {
content: "\201C"; /* Inserts the opening quotation mark */
color: #FFA07A; /* Matches the color of the left border */
font-size: 4em; /* Sets the size of the quotation mark */
position: absolute; /* Positions the quotation mark relative to the blockquote */
left: 10px; top: -10px; /* Adjusts the position of the quotation mark */
font-family: Arial, sans-serif; /* Sets the font for a unique look */
}

• The .custom-blockquote class: This class includes multiple properties that design and position our blockquote. We set the font-family to Open Sans for the quote and the author’s name, using italic and bold variations for distinction.

.custom-blockquote {
font-size: 1.4em; /* Sets the font size for the quote and the author's name */
width: 60%; /* Adjusts the width of the blockquote */
margin: 50px auto; /* Centers the blockquote and adds margin on the top and bottom */
font-family: Open Sans, sans-serif; /* Sets the font for the quote and author's name */
font-style: italic; /* Applies italic style to the quote */
color: #555555; /* Sets the color for the quote */
padding: 1.2em 30px 1.2em 75px; /* Adds space around the quote and author's name */
border-left: 8px solid #FFA07A; /* Adds a left border with a unique color */
line-height: 1.6; /* Improves the readability of the quote */
position: relative; /* Sets the position relative to the parent element */
background: #EDEDED; /* Sets a light grey background color */
}

The Final Design

The image below showcases the final result of the implementation. You’ll see that the creative use of CSS ::before pseudo-element and other design properties result in an attractive, distinct blockquote that stands out from regular web content.

Remember, while this guide provides a specific styling, you can freely modify the color, font, size, positioning, and other properties to match your website’s design language. We encourage you to do so!