Создание интересного офомления для элемента цитаты с использованием CSS

Демонстрация работы элемента цитаты c техническими кавычками, улучшенный пример из урока Chris Coyier, специально для сайта dejurka.ru

HTML

<blockquote>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt processus soluta sequitur autem demonstraverunt.</blockquote>

CSS

blockquote {
  position: relative;
  font: 12px/18px normal "Courier New", sans-serif;
  padding: 2px 70px 2px;
  background-color: #000;
  color: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  text-indent: 23px;
  }
blockquote::before { 
  content:" ";
  display: block;
  position: absolute;
  width: 55px;
  height: 100%;
  margin-left: -70px;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/openquote5.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  }  
blockquote::after {
  content:" ";
  display: block;
  position: absolute;
  width: 55px;
  height: 100%;
  top: 0px;
  right: 0px;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/closequote5.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
   }