Блог

Как я могу оформить цитату из блока так, чтобы сбоку была вертикальная полоса? Я ищу что-то вроде blockquote от 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. Есть ли ошибки в моем решении? Как это можно улучшить?

Просто добавьте border-left в 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>