2

Currently we are using <blockquote> to add beginning and end quotes to a string through CSS since we need to custom style it. However, they are not aligning inline with the opening quote aligning before the beginning and the closing quote at the end of the text.

How can we fix the alignment?

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}
<blockquote>
  <p>Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.</p>
</blockquote>

Current results Current issues

Expected Results desired output

DaniP
  • 37,813
  • 8
  • 65
  • 74
usernameabc
  • 662
  • 1
  • 10
  • 30

1 Answers1

3

This is because you have your content inside a p tag and that isn't an inline element, by default is a block. So either remove that tag or style it to be inline

Removing Tag

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
  text-align:center;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}
<blockquote>
  Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.
</blockquote>

Styling p to Inline

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
  text-align: center;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

blockquote p {
  display: inline;
}
<blockquote>
  <p>Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.</p>
</blockquote>
DaniP
  • 37,813
  • 8
  • 65
  • 74
  • 1
    Or, plan C: assign the quotes to the p, with something like `blockquote > :first-child::before {content: open-quote;}` and similar for the last-child. Edit: oh wait, that won't work if there are no elements in the blockquote. Never mind then. – Mr Lister Mar 26 '18 at 16:35
  • 1
    @DaniP After further testing, the text editor is always adding the `

    ` tag so making the p inline using your solution.

     – usernameabc Mar 26 '18 at 17:27