css - 如何在旁边设置一个带条的块引用样式（如 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>