⑤ Добавление значения атрибута и кавычек

Продолжим изучение темы CSS - контент. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Свойство content
• ② Добавление специального символа
• ③ Добавление текста и изображения
• ④ Добавление блочного содержимого

Функция attr() позволяет добавить любое значение атрибута, например, url-адрес ссылки, который будет выводиться при печати текста.

CSS

a:after {
  content: attr(href);
}

С помощью значений open-quote и close-quote можно генерировать открывающие и закрывающие кавычки. Внешний вид кавычек указывается в свойстве quotes. Если оно не задано, то будут использованы значения браузера по умолчанию.

HTML

<blockquote>Some text</blockquote>

CSS

blockquote {
  quotes: "\2039" "\203A";
  font-size: 40px;
  font-family: 'Sigmar One', cursive;
}
blockquote:before {
  content: open-quote;
  color: mediumvioletred;
  margin-right: 10px;
}
  blockquote:after  {
  content: close-quote;
  color: mediumvioletred;
  margin-left: 10px;
}

Продолжение в следующей статье!