Цитаты обычно используются в статьях для привлечения внимания к определенной фразе, теме или факту. Им обычно задается более заметный шрифт большего размера, чем текст абзацев, и чаще всего они заключаются в кавычки. Элемент <blockquote> (блок цитаты) наиболее подходит для цитат. Можно применить подобную запись для класса цитаты:

.pullquote {
        padding: 2.6rem 2.2rem 2rem 3.6rem;
        width: 24rem;
        margin: 0 2rem 2rem 0;
        float: left;
        font-family: Questrial, Helvetica, sans-serif;
        font-size: 1.8rem;
        line-height: 1.4;
        -webkit-font-smoothing: antialiased;
        color: #FFF;
        text-transform: uppercase;
        background: #2F2F2F;
        border: 1px solid #eee;
        box-shadow: 0 0 5px #2F2F2F;
        font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;
} 

Этой цитате не хватает кавычек. Их можно добавить несколькими способами:

è С помощью добавления символов HTML.

è С помощью добавления разметки, такой как элементы <q>.

è С помощью создания подходящих символов в текстовом редакторе и переноса их в текст сайта.

Тут также может пригодиться возможность CSS добавлять содержимое. Идея добавления содержимого может быть сложна для понимания, в первую очередь из-за того, что она находится за пределами основного назначения CSS. Основное назначение CSS, на которое мы неоднократно обращали Ваше внимание, — CSS задает отображение содержимого, а разметка HTML предоставляет значения для содержимого. А добавляемое содержимое проводит нечеткую линию между ними.

Давайте рассмотрим простой пример: каждый абзац, создающийся где угодно на любой странице сайта, должен начинаться со слов «Давным-давно» красного цвета, после которых идет многоточие (…).

Получается, нужно печатать очень много повторяющегося текста для каждого абзаца, в котором можно ошибиться или опечататься. Здесь можно спорить о том, что текст «Давным-давно ...» стал постоянной частью отображения каждого абзаца: декоративным содержимым. Чтобы добиться этого эффекта, воспользуемся псевдоэлементом :before:

p:before {
        content: ("Once upon a time… ");
        color: red;
}

Значение свойства content (содержимое) может быть почти любым: ключевое слово, строка символов, символы HTML, изображение (с помощью синтаксиса url, используемого для фоновых изображений), счетчик, даже звук.

Вот код CSS для примера, в котором перед каждым абзацем в цитате должна быть открывающая кавычка:

.pullquote p:before {
        content: open-quote;
}

И закрывающая кавычка в конце:

.pullquote p:after {
        content: close-quote;
}

Добавляемое содержимое можно использовать для разных целей: хорошим примером может быть меню, в котором пункты меню отделялись бы друг от друга косой чертой (/), а не вертикальной границей.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Классические типографские эффекты с использованием CSS: первая строка вступления
• Создание анимированных подчеркиваний для ссылок
• Использование свойства CSS тени блока