如何设置侧面带有横线的块引用样式（如 Stack Exchange）？

Question

如何设计块引用的样式，使其侧面有一个竖线？我正在寻找类似 Stack Exchange 的块引用之类的东西。截屏：

这是我到目前为止所尝试过的：

blockquote {
    position: relative;
    margin: 1em;
    padding: 0.5em 1.5em;
    color: gray;
}

blockquote:before {
    display: block;
    position: absolute;
    content: " ";
    bottom: 5px;
    top: 5px;
    left: 0;
    border-left: 4px solid gray;
}

这似乎可行，但我不太确定，因为我对 CSS 不太熟悉。我的解决方案中是否存在错误？如何改进？

Answer 1

只需添加border-left到 blockquote css 并将其设置为灰色即可。

blockquote {
  background: #f9f9f9;
  border-left: 3px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}
blockquote p {
  display: inline-block;
}

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>