如何在侧面加上条形样式如Stack Exchange？

问题描述

如何设置样式的引用，使侧面有竖线？我正在寻找类似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不太熟悉。我的解决方案中有错误吗？该如何改善？

解决方法

只需将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>