How to display customized quotes before and after text using CSS?

By IncludeHelp Last updated : November 13, 2023

To display customized quotes before and after text using CSS, don't use paragraph or span tags. HTML provides a special tag <blockquote> to display text in quotes. To customize before and after quotes, use the before and after Pseudo classes.

Example

Here is the code for displaying customized quotes before and after text using CSS -

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	
    <style type="text/css">
      body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1em;
      max-width: 960px;
      margin: auto;
      }
      blockquote {
      font-size: 1.6em;
      line-height: 1.2em;
      }
      blockquote:before {
      content: open-quote;
      }
      blockquote:after {
      content: close-quote;
      }
      blockquote:before,
      blockquote:after {
      display: inline-block;
      vertical-align: bottom;
      color: #f40;
      font-size: 3em;
      top: .1em;
      position: relative;
      }
    </style>
	
  </head>
  
  <body>
    <h1 style="text-align: center;">DEMO: Display customize quotes before and after text using CSS</h1>
    <blockquote>Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.</blockquote>
  </body>
</html>

Output

The output of the above example is:

display customize quotes before and after text

Use DIVs for multiple columns layout inside a DIV using CSS?

How to write superscript using HTML?