2

Given an HTML quote, where I would like CSS to automatically wrap inside opening “ and closing ” quotes without touchting the HTML.

<blockquote><p>
I love you not only for what you are, but for what I am when I'm with you.
I love you not only for what you have made of yourself, but for what you are making of me.
I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities of the good in me.
I love you for helping me to construct of my life not a tavern, but a temple.
</p></blockquote>

The following CSS works, but only partially:

blockquote {font-style: italic;}
blockquote:before {content: '“'; float:left;}
blockquote:after  {content: '”'; float:right;}

The opening quotes are places correctly, but the closing quotes are placed not directly after the end of the quote where the dot is. Also the quote looks like vertically mispositioned at the next line.

Here is an example of the problem, with a quote from a recent movie:

enter image description here

How can this be fixed in an elegant way? Thank you!
Feel free to try different simple or crazy layouts in your answer to make this one a timeless solution for the community to use.

Sam
  • 15,254
  • 25
  • 90
  • 145
  • 1
    remove both float and add `display:inline` to the p element – Temani Afif Jun 19 '22 at 09:24
  • @TemaniAfif Brilliant! That solved my question! Thank you. Please add as answer sothat I can upvote it as answered! Also: if you like, feel free to provide one or two fancy variations of how You would define css rules for a timeless css `
    `
     – Sam Jun 19 '22 at 09:28
  • what do you mean by "timeless" ? – Temani Afif Jun 19 '22 at 09:33
  • I mean something that You think looks equally as good in 2020 as in 1995, or in 2040, according to you. – Sam Jun 19 '22 at 09:50
  • 1
    if the HTML code won't change then you can consider my solution as "timeless" because I am relying on very old properties that will work the same way forever – Temani Afif Jun 19 '22 at 09:53
  • Agreed! Removed, to avoid making the question confusing. Thanks for your advice. You can now remove the comment since its no longer relevant for this page. I will then also remove this comment since its also then no longer relevant for this question. – Sam Jun 21 '22 at 08:27

1 Answers1

2

Keep the quotes inline and make the p element inline as well

blockquote {
  font-style: italic;
}
blockquote > p {
  display:inline;
}
blockquote:before {
  content: '“';
}
blockquote:after {
  content: '”';
}
<blockquote>
  <p>
    I love you not only for what you are, but for what I am when I'm with you. I love you not only for what you have made of yourself, but for what you are making of me. I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities
    of the good in me. I love you for helping me to construct of my life not a tavern, but a temple.
  </p>
</blockquote>

Or target the p element

blockquote {
  font-style: italic;
}
blockquote > p:before {
  content: '“';
}
blockquote > p:after {
  content: '”';
}
<blockquote>
  <p>
    I love you not only for what you are, but for what I am when I'm with you. I love you not only for what you have made of yourself, but for what you are making of me. I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities
    of the good in me. I love you for helping me to construct of my life not a tavern, but a temple.
  </p>
</blockquote>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Awesome, thank you! What is/are the benefit(s) of using `blockquote > p {}` instead of `blockquote p {}` ? Will the first one with `>` have a higher CSS processing speed because it has a higher specificity? – Sam Jun 19 '22 at 14:21
  • @Sam both have the same specificity and there is no particular benefit here. I just wanted to have a precise selector and target the direct child – Temani Afif Jun 19 '22 at 14:41