html - Add a fixed-width pseudo element before a full-width element -


i'd add text before each blockquote. here's illustration:

enter image description here

the caveat html generated markdown, can't modified. have format <blockquote> <div>content</div> </blockquote>.

i've tried using flex grid, don't know i'm doing flex. here's close i've gotten:

blockquote {      background-color: #ccc;      display: flex;  }  blockquote > *::before {      background-color: #333;      color: white;      content: "quote";      flex: 2em;      display: inline-block;      transform: translate(-50%, 0) rotate(-90deg);  }  blockquote > * {      flex: 100%;  }
<blockquote>      <p> lorem ipsum dolor </p>  </blockquote>    <blockquote>      <ol>          <li>blah</li>          <li>blah</li>          <li>blah</li>      </ol>  </blockquote>    <blockquote>      <div> other content </div>  </blockquote>

set pseudo element child of blockquote. use writing-mode: vertical-lr display text vertically, , rotate text start bottom. see comments in css.

blockquote {    display: flex;    background-color: #ccc;  }     /** pseudo element should child of blockquote **/  blockquote::before {    width: 2em;    line-height: 2em; /** align text horizontally **/    writing-mode: vertical-lr; /** set vertical **/    transform: rotate(180deg); /** rotate start bottom **/    text-align: center; /** align text vertically **/    padding: 0.5em 0;    background: #333;    color: white;    content: "quote";  }    blockquote>* {    flex: 1; /** take remaining free space **/    padding: 0 0 0 1.5em;  }
<blockquote>    <p> lorem ipsum dolor </p>  </blockquote>    <blockquote>    <ol>      <li>blah</li>      <li>blah</li>      <li>blah</li>    </ol>  </blockquote>    <blockquote>    <div> other content </div>  </blockquote>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -