我如何设计一个块引用，旁边有一个栏（比如 Stack Exchange）？

Question

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

这是我目前尝试过的方法：

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>

我如何设计一个块引用，旁边有一个栏（比如 Stack Exchange）？

How do I style a blockquote with a bar at the side (like Stack Exchange)?

css

blockquote