htmlcsslayoutcss-contentblockquote

Classic HTML blockquote consisting of top and bottom centered special character

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.

enter image description here

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:

Photoshoped end result could look something like this:

enter image description here

Demo

Solution

  • 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>