Красивое оформление цитат

Однажды вы захотите сделать красивую цитату на вашем сайте. И тогда вы вспомните эту публикацию и вернетесь сюда, чтобы взять воспользоваться кодом нашего примера. Но, сразу мы покажем, как можно действительно красиво оформить цитату и привлечь к ней внимание читателей. Вот наш пример:

Отладка в два раза сложнее, чем написание кода. Следовательно, если вы пишете код настолько умно, насколько это возможно, вы по определению недостаточно умны, чтобы его отладить.

И конечно же приводим css-стиль для класса tip . Вы легко догадаетесь как заменить восклицательный знак на нужный вам:

p.tip {
 padding: 12px 24px 12px 30px;
 margin: 2em 0;
 border-left: 4px solid #f66;
 background-color: #f8f8f8;
 position: relative;
 border-bottom-right-radius: 2px;
 border-top-right-radius: 2px;
}

 p.tip:before {
 position: absolute;
 top: 14px;
 left: -12px;
 background-color: #f66;
 color: #fff;
 content: "!";
 width: 20px;
 height: 20px;
 border-radius: 100%;
 text-align: center;
 line-height: 20px;
 font-weight: bold;
 font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 font-size: 14px;
}