В этой небольшой статье мы рассмотрим интересный способ, позволяющий легко создать двойные кавычки HTML для выделения цитат. На страницах нашего блога мы уже подробно рассмотрели, как стильно оформить цитаты в HTML. Сегодня мы обсудим простой, но эффективный метод создания стилизованных двойных кавычек в HTML.
В данном решении мы воспользуемся псевдо-классами before и after. С их помощью мы сможем легко создать двойные кавычки в HTML, добавив таким образом интересное оформление цитат.
Создаём двойные кавычки HTML
Для достижения этой цели нам достаточно использовать HTML-тег <blockquote> для создания цитаты и применить к ней соответствующие стили оформления. Этот простой подход позволяет создать элегантные и привлекательные цитаты на вашем сайте.
HTML
<blockquote> Текст... </blockquote>
CSS
blockquote {
font-size: 16px;
font-style: italic;
padding: 20px 20px 20px 30px;
margin: 20px 0;
border: 1px solid #333;
position: relative;
}
blockquote::before {
content: "\201C";
/* Левая кавычка */
position: absolute;
top: -15px;
left: 20px;
font-size: 56px;
width: 45px;
height: 45px;
border-radius: 50%;
background: #fff;
border: 1px solid #333;
padding-left: 8px;
line-height: 1.3;
}
blockquote::after {
content: "\201D";
/* Правая кавычка */
position: absolute;
bottom: -15px;
right: 20px;
font-size: 56px;
width: 45px;
height: 45px;
border-radius: 50%;
background: #fff;
border: 1px solid #333;
padding-left: 8px;
line-height: 1.3;
}
В этом примере мы использовали псевдоэлементы, чтобы добавить кавычки перед и после текста в элементе <blockquote>. С помощью свойства position: relative; для самого блока цитаты, мы устанавливаем позиционирования для псевдоэлементов.
Затем мы используем свойство content: ''; для добавления кавычек внутри псевдоэлементов. С помощью свойств position: absolute;нам дается полное позиционирование через top, left, bottom, right.