В последнее врем в разработке стали часто использоваться псевдоклассны ::before и ::after. Я, сам лично, часто использую их как помощников для дополнительного оформлению элементов на странице.
Вы так же можете писать текст для псевдоклассов использую атрибут content. Но это совсем другая тема для описания, поэтому я ее опущу и продолжу о главной теме этой записи.
Теперь давайте посмотрим как решить проблему со вставкой кавычек в content атрибут в CSS.
Демо
21516
Разъяснение
В демо выше есть два HTML элемента — q и blockquote.
У меня был один заказ. Мне скинули готовый нарисованный дизайн. Это был лендинг и как это обычно бывает — присутствовал блок с отзывами, где были именно кавычки. По структуре, понятно, что нужно делать, но я не хотел вырезать кавычки картинками, а решил сделать это с помощью HTML/CSS.
Это оказалось сделать не так просто, потому что просто скопировав кавычки и вставив в content — вы ничего не увидите при отображении, потому что нужно использовать спец коды, например /201c или /201d (открывающаяся и закрывающаяся кавычка).
P.s. Я сначала подумал, что смогу вставить прямые кавычки, сделаю их курсивными и поставлю шрифт с засечками, например — Georgia, но это не помогло. У меня получилось только вставить кавычки, но дальше все мои попытки были безнадежными. Поэтому я воспользовался поиском и нашел отличное решение. Специально для этого я написал эту запись и сделал демо, чтобы вы понимали о чем идет речь. В какой-то момент и вы столкнетесь с такой же проблемой.
Послесловие
Решение достаточно простое и на все поиски у меня ушло не более 5 минут. Надеюсь, что и вам оно поможет.
Если у вас остались какие-либо вопросы — пишите их ниже к этому посту. Я буду рад вам помочь.
