Classic HTML blockquote consisting of top and bottom centered special character

Question

I am trying to style a classic blockquote, where the bottom and top border contain a special character such as ≋ ≍ ≡ ∼ ⨌ ⫗ ⁗ ∾ ∿ centered on its own box with a background color that goes over the top and bottom border.

This is where I am right now. This may be a difficult question to solve but after years of dreaming about such a classical blockquotation styling, I have finally decided that I'm willing to dedicate time and my own points in one or multiple bounty awards to give awy to achieve this for the community.

blockquote{
    margin: 1em -1em 0 -1em;
    padding: .5em 1em .5em 1em;
    border-left: 4px double #CCC;
    border-right: 4px double #CCC;
    border-top: 1px dotted #CCC;
    border-bottom: 1px dotted #CCC;
    background: hsla(0,0%,0%,0.025)
    }
blockquote > p{ display:inline; }
blockquote:before {content: '“';margin-right: 0em}
blockquote:after  {content: '”'; margin-left: -.25em}

<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 HTML structure cannot be changed for two reasons: 1) most CSM websites do not allow for it anyways and 2) because changing the HTML just for layout has no semantical meaningful advantage so just to style this classic blockquote, all the styling should be possible within current or future CSS releases.

In summary: I would like to solve the classic blockquote challenge in CSS only, and for this any and all answers that solve one, or all, of the following bullets helps a great deal:

Place a special character like ∿ over the top and bottom border;
Center the character horizontally automatically, regardless of blockquote width;
Allow for a background box to be colored in to hide the border behind the character.

Photoshoped end result could look something like this:

Demo

Sean · Accepted Answer · 2022-06-22T21:51:51.120

If you're stuck with the the <blockquote><p>...</p></blockquote> structure, I'd recommend using pseudo-elements on the <p> for the quotation marks, and pseudo-elements on the <blockquote> for the ornamentation.

blockquote {
  position: relative;
  border: 1px solid gray;
  margin: 1rem;
  padding: 1rem;
}
blockquote:before,
blockquote:after {
  content: '∿';
  display: block;
  position: absolute;
  width: 1em; /* set height/width based on font-size */
  height: 1em;  /* set height/width based on font-size */
  line-height: 0.8;  /* '∿' character is not naturally vertically centered; adjusting line-height can compensate */
  text-align: center;
  top: -0.5em; /* move it up half its height */ 
  left: calc(50% - 0.5em); /* move it left half its parent's width, minus half its width */
  background: white;
}
blockquote:after {
  top: unset; /* unset the previously declared "top" property because now we're styling the bottom one and dont want it to have a height derived from the "top" and "bottom" values, which is what would happen if it weren't unset */
  bottom: -0.5em; /* move it down half its height */
}
p {
  margin: 0;
}
p:before {
  content: '“'
}
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>

Brilliant Sean! Why did I not come up with that? I'm just kidding: Im still aching the back of my head trying to figure out how this works! :) Could you please add a few `/* comments */` behind the most advanced property values (such as `top`, `left`, and `bottom` as well as the value `unset`) to learn what these do? But again: brilliant! I'm setting a bounty in the near future to reward at least 50 extra points as a starting thanks, meanwhile I will try to learn how on earth you got this fixed so switftly! :) Final question about `content: ' \223F';` why not `content: ' ∿';` ? — Sam, Jun 21 '22 at 19:01
@Sam I've simplified the CSS and added comments. Specifying the character code isn't necessary for this character, I just did it out of habit. — Sean, Jun 22 '22 at 21:52

score -2 · Answer 2 · answered Jun 21 '22 at 13:05

-2

just use fieldset tag, and legend tag for the text

docs : https://www.w3schools.com/tags/tag_fieldset.asp

example :

<fieldset> 
  <legend>~</legend>
  <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>
</fieldset>

answered Jun 21 '22 at 13:05

sanss

16
2

1

Please review the HTML spec. This is not what the [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) is for and this does not answer the question at all.
– Sean Jun 21 '22 at 13:56
@Sanss welcome to Stack Overflow, as Sean already said: this answer does not comply to a CSS-only solution. As asked in the question, the semantic contents of the HTML should remain pure and unchanged, because often its not possible to change HTML in content managed websites. All the necessary styling should therefore only be done in CSS for this question's answer. – Sam Jun 21 '22 at 19:05

Classic HTML blockquote consisting of top and bottom centered special character

Demo

2 Answers2