html - 在全宽元素之前添加一个固定宽度的伪元素

Question

我想在每个 block 引用之前添加一些文本。这是一个例子:

需要注意的是html是markdown生成的，所以不能真正修改。它将始终具有格式 <blockquote> <div>content</div> </blockquote> .

我试过使用 flex 网格，但我真的不知道我在用 flex 做什么。这是我得到的最接近的结果:

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>

Answer 1

你可以看看 writing-mode 和 flex(我仍然添加不同于@itod 的回答方法)

blockquote {
  background: linear-gradient(to right, gray 1.5em, lightgray 1.5em) lightgray;
  display: flex;
  align-items: center;
  padding-left: 2em;
}

blockquote:before {
  content: ' quote';
  padding: 0.5em 0;
  color: white;
  margin: auto 0;
  width: 1.5em;
  writing-mode: vertical-rl;
  transform: scale(-1) translatex(1.9em)
}

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