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

Question

How can I style a blockquote such that there is a vertical bar at the side? I'm looking for something like Stack Exchange's blockquote. Screenshot:

This is what I have tried so far:

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

This seems to work, but I'm not too sure because I am not very familiar with CSS. Are there bugs in my solution? How can it be improved?

Answer 1

Just add border-left to the blockquote css and color it grey.

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>