Classic HTML blockquote consisting of top and bottom centered special character-CodePudding

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

CodePudding user response：

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: ' \223F';
  display: block;
  position: absolute;
  width: 2ch;
  height: 2ch;
  line-height: 1;
  text-align: center;
  top: calc(-1ch - 0.1em);
  left: calc(50% - 1ch);
  background: white;
}
blockquote:after {
  top: unset;
  bottom: -1ch;
}
p {
  margin: 0;
}
p:before,
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>

CodePudding user response：

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>