Css content вставить спецсимвол

Как использовать символы Unicode в CSS

Для использования символов Unicode в CSS первым делом нужно объявить соответствующую кодировку; рекомендуется UTF-8. Это делается с помощью так называемого эт-правила @charset в самом начале файла, то есть первой строкой:

Синтаксис: сначала указывается @charset ; затем — ровно ОДИН пробел; затем — имя кодировки в ДВОЙНЫХ кавычках; затем — точка с запятой. Синтаксис должен быть точно таким, как указан здесь, Это ВАЖНО, так как иначе будет ошибка. То есть нельзя использовать между @charset и названием кодировки больше или меньше одного пробела; нельзя заключать имя кодировки в одинарные кавычки; обязательно нужно ставить точку с запятой в конце; также ничего нельзя писать ПЕРЕД @charset , включая комментарии, то есть первым символом в файле должен быть «эт» (@; «собака», по-нашему).

Однако одного обявления кодировки мало: нужно чтобы и само содержимое файла стилей было закодировано в объявленой кодировке. Что это значит.
Эт-правилом @charset мы просто указываем браузеру какой алгоритм кодирования ему нужно использовать, чтобы правильно прочесть содержимое файла, однако само содержимое может быть закодировано по другому алгоритму и тогда, как вы понимаете, браузер обработает файл некорректно. Обычно в большинстве редакторов кода текущая кодировка файла вместе с другой полезной информацией отображается в строке статуса (в нижней части окна), а изменить её можно через меню — эта возможность есть, поищите; описывать в данном посте где именно она находится для всех редакторов, коих сотни, а то и тысячи, по понятным причинам я не стал; если не найдёте, напишите мне — я вам подскажу.

Если вы будете изменять кодировку файла, то учтите, что в некоторых редакторах может быть два пункта меню, которые могут сбить вас с толку: Кодировать в
.
Преобразовать в Нужно выбрать именно Преобразовать в .

На самом деле указывать кодировку в файле стилей необязательно ЕСЛИ она обявлена в HTML-документе, но ещё раз напомню: кодировка содержимого файла должна совпадать с объявленной. Это, кстати, касается не только CSS, но и абсолютно любых других областей — ведь если вы говорите, что следующие данные нужно обработать по алгоритму указанной кодировки, то вы же и должны предоставить закодированные этим же алгоритмом данные.

Я так заостряю ваше внимание на том, что помимо объявления кодировки нужно чтобы и данные были в той же кодировке, так как на этом очень часто спотыкаются и не понимают почему всё в кракозябрах.

Тем не менее, хоть и кодировку в файле стилей объявлять необязательно ЕСЛИ она обявлена в HTML-документе, как я уже сказал выше, всё равно лучше это сделать, так как мало ли что ☺:

Рекомендую ВСЕГДА ВЕЗДЕ объявлять кодировки и использовать, по крайней мере в Web’е, именно UTF-8!

Использование символов Unicode в свойстве Content

Рассмотрим CSS-свойство content , которое используется совместно с псевдоэлементами ::before и ::after . В данном свойстве указывается контент, который будет помещён перед или после элемента, к которому применяется соответствующий псевдоэлемент:

selector::before, selector::after < content: "строка"; >

строка любой набор символов, который выводится как есть, кроме экранированных последовательнойстей (см. далее).

Пример использования свойства Content

Контент, добавленный с помощью свойства content не выделяется курсором мыши и не копируется в буфер обмена.

Пример использования символов Unicode в свойстве Content

Допустим, нужно вывести с помощью свойства content после некоторого элемента смайлик (☺), который имеет номер в Unicode u+263a ; это запишется так:

То есть номер символа в Unicode нужно просто проэкранировать обратным слешем (\).
Также отмечу — впередистоящие нули можно не указывать: \0030 идентично \30 .

Второй способ — это указать символ непосредственно:

Чтобы добавляемые через content пробельные символы Unicode (пробелы, табуляции и переводы строк) отображались как есть (имеется в виду предварительное форматирование), для элемента должно быть определено свойство white-space со значением pre или подобным ему.

Некоторые символы Unicode

К слову, заметим, что мнемоники (частично) соответствуют названию символа по-английски; пример:   — N o- B reak SP ace.

Источник

content¶

Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

Применяется совместно с псевдоэлементами ::after и ::before , они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

/* Keywords that cannot be combined with other values */ content: normal; content: none; /* values */ content: url('http://www.example.com/test.png'); content: linear-gradient(#e66465, #9198e5); content: image-set('image1x.png' 1x, 'image2x.png' 2x); /* alt text for generated content, added in the Level 3 specification */ content: url('http://www.example.com/test.png') / 'This is the alt text'; /* value */ content: 'prefix'; /* list of content values */ content: 'prefix' url('http://www.example.com/test.png'); content: 'prefix' url('http://www.example.com/test.png') 'suffix' / 'This is some alt text'; /* values, optionally with */ content: counter(chapter_counter); content: counter(chapter_counter, upper-roman); content: counters(section_counter, '.'); content: counters( section_counter, '.', decimal-leading-zero ); /* attr() value linked to the HTML attribute value */ content: attr(value string); /* Language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* Except for normal and none, several values can be used simultaneously */ content: open-quote counter(chapter_counter); /* Global values */ content: inherit; content: initial; content: revert; content: revert-layer; content: unset; 

Значения¶

<строка>Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда ( &sect ; например), будут отображаться как есть, т. е. простым текстом ( &sect ;, а не § ). attr() Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after добавит после ссылки её адрес, т. е. значение атрибута href . Если указанного атрибута нет, то вернётся пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes . close-quote Вставляет закрывающую кавычку. no-open-quote Отменяет добавление открывающей кавычки. no-close-quote Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счётчика, заданного свойством counter-reset . none Не добавляет никакого содержимого. normal Задаётся как none для псевдоэлементов ::before и ::after .

Применяется к псевдоэлементам ::before и ::after

Спецификации¶

Источник

Content

С помощью свойства content можно вставлять в текст веб-страницы генерируемое вспомогательное содержимое в виде букв, слов, предложений или специальных знаков. Такая возможность осуществляется при взаимодействии со свойствами after и before, которые указывают, с какой стороны элемента выводить новое содержимое.

 content: строка; content: attr(атрибут); content: open-quote; content: close-quote; content: no-open-quotes; content: no-close-quote; content: url; content: counter; content: normal; content: none; content: inherit; 

Строка – здесь записывается текст в кавычках, который должен выводиться веб-страницу. Также имеется возможность записи юникода совместно с текстом или без.

attr() – функция добавления значения атрибута элемента.

open-quote – вставка открывающих кавычек.

close-quote – вставка закрывающих кавычек.

no-open-quotes – отмена открывающих кавычек.

no-close-quote – отмена закрывающих кавычек.

url – адрес вставляемого объекта в относительном или абсолютном формате.

counter – вывод значения счетчика, установленного свойством counter-reset .

none – отмена добавления содержимого.

normal – действует как none для псевдоэлементов :before и :after .

inherit – наследование значения родителя.

Добавление специального символа

Любому текстовому элементу для украшения можно добавить специальные символы, располагаемые спереди, сзади или с обеих сторон одновременно. В таких случаях в качестве выводимого содержимого используется код символов Юникода.

 CSS h1 < color: #424242; text-align: center; >h1:before, h1:after < color: #818181; content: "\2605 \2605 \2605"; >h1:before < margin-right: 20px; >h1:after

Добавление текста

В качестве содержимого, в особенности, когда оно часто повторяется, можно использовать любой текст, который будет выводиться в указанном месте, как есть. Для этого нужно в качестве параметра свойства content между кавычками вписать желаемый текст.

 HTML 
 
CSS .container < font-size: 22px; margin-top: 55px; margin-right: 0px; margin-bottom: 0px; margin-left: 100px; >.container div < margin: 12px 0px; >.first-name:before, .last-name:before, .your-mail:before, .phone:before < font-weight: bold; >.first-name:before < content: "First Name: "; >.last-name:before < content: "Last Name: "; >.your-mail:before < content: "Your Mail: "; >.phone:before

Добавление значения атрибута attr

С помощью функции attr() имеется возможность добавления в свойство стилей значения выбранного атрибута элемента. К примеру, можно получить url -адрес ссылки, а затем вывести его с основным текстом анкора.

Добавление кавычек

С помощью таких параметров как open-quote и close-quote можно отображать открывающие и закрывающие кавычки.

 HTML 
Компьютерные CSS p < color: #424242; font-size: 30px; text-align: center; >.computer-quotes:before < content: open-quote; >.computer-quotes:after

Добавление изображения

При использовании свойства content в качестве значения можно использовать абсолютный или относительный адрес того объекта который нужно вставить.

Добавление счетчика элементов

С помощью свойства counter-reset и counter-increment можно задать нумерацию для любых блочных элементов на веб-странице.

1. Наименование главы
   1. Название статьи
   2. Название статьи
   3. Название статьи
   1. Название статьи
   2. Название статьи
   3. Название статьи
   1. Название статьи
   2. Название статьи
   3. Название статьи

    CSS .chapters < font-size: 18px; padding-top: 45px; margin-left: 50px; >.chapters li < margin: 12px 0px; list-style-type: none; >.chapters ol < margin: 24px 0px; counter-reset: list1; >.chapters ol li:before < counter-increment: list1; content: "Глава № " counter(list1) ". "; >.chapters ol ol < counter-reset: list2; >.chapters ol ol li:before

   Источник