How to Add a Closing Quote to the Blockquote Element

By default, the theme displays an open quote icon at the beginning of blockquote elements. You can disable this by modifying the blockquote design in the Customizer and adding a border.

The theme doesn't include a closing quote to avoid potential responsive layout issues, where the closing mark might appear on its own line and disrupt the design. However, if you'd like to add a closing quote, you can easily do so using the custom CSS below.

blockquote p:last-of-type::after {
    content: "";
    vertical-align: bottom;
    transform: scaleX(-1);
    display: inline-block;
    margin-inline-start: 10px;
    height: var(--wpex-blockquote-icon-size);
    width: var(--wpex-blockquote-icon-size);
    background-color: currentColor;
    opacity: .6;
    -webkit-mask-image: var(--wpex-blockquote-icon);
    mask-image: var(--wpex-blockquote-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
Learn how to add custom CSS to your site.
Related Snippets
  • This snippet was last updated on
Back To Top