CSS до и CSS после - как использовать свойство содержимого

contentСвойство в CSS определяет содержимое элемента. Возможно , вы слышали , что это свойство применяется только к ::beforeи ::afterпсевдо-элементам. В этой статье мы рассмотрим различные варианты использования contentсвойства, в том числе за пределами псевдоэлементов.

Предпосылка

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

  • Псевдоэлементы CSS - объяснение селекторов до и после

Принятые значения

Во-первых, давайте взглянем на все допустимые значения contentсвойства.

  • normal: Это значение по умолчанию. Вычисляет noneпри использовании с псевдоэлементами.
  • none: Псевдоэлемент не будет создан.
  • : Устанавливает содержимое в указанную строку. Эта строка может содержать escape-последовательности Unicode. Например, символ авторского права: \\000A9.
  • : Устанавливает в качестве содержимого изображение или градиент с помощью url()или linear-gradient().
  • open-quote| close-quote: Устанавливает для содержимого соответствующий символ кавычки, указанный в quotesсвойстве.
  • no-open-quote| no-close-quote: Удаляет цитату из выбранного элемента, но по-прежнему увеличивает или уменьшает уровень вложенности, на который ссылается quotesсвойство.
  • attr(*attribute*): Устанавливает содержимое как строковое значение атрибута selected elements selected.
  • counter(): Устанавливает содержимое как значение a counter, обычно числа.

Строка

Одним из самых простых примеров может быть использование строкового содержимого до или после элемента. В этом примере мы добавим символ ссылки перед ссылкой и добавим URL-адрес ссылки после него.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

Обратите внимание на пробел после символа Unicode в ::beforeпсевдоэлементе и перед первой круглой скобкой в ::afterпсевдоэлементе. Это создаст пространство между ними и родительским элементом.

В качестве альтернативы вы можете добавить paddingили marginк псевдоэлементам, чтобы добавить разделение.

Основные цитаты

С помощью contentсвойства вы можете добавлять кавычки до и / или после элементов. Теперь в HTML есть тег. Это также добавит кавычки вокруг его содержимого. Однако с этим contentсвойством мы можем лучше контролировать реализацию.

Вот самый простой пример добавления кавычек:

Вы также можете сделать это с помощью тега HTML . Но, возможно, мы захотим оформить цитату по-другому. Так что давайте добавим только начальную, а не конечную цитату. И давайте также стилизуем вступительную цитату.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

Результат:

Изображение с одинарной цитатой в левом верхнем углу абзаца

Расширенные цитаты

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

В CodePen ниже мы используем теги HTML , а затем указываем, какие теги не должны отображать кавычки.

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

Чтобы объяснить это, нам нужно понять quotesсвойство. Это просто «массив» символов, который следует использовать при цитировании. Вот пример:

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

Это наборы цитат. Первый набор будет использоваться для верхнего уровня котировок. Второй набор будет использоваться для первой вложенной цитаты. И третий набор будет использоваться для второй вложенной цитаты. И так далее, если бы комплектов было больше.

Теперь, когда мы понимаем quotesсвойство, я могу объяснить, как работают свойства no-open-quoteи no-close-quote.

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

Взгляните на пример ниже. Вы увидите, что второй уровень котировок пропущен.

Атрибуты

Атрибуты могут использоваться для передачи содержимого из HTML в contentсвойство CSS . Фактически мы использовали это уже в примере ссылки, где мы использовали hrefатрибут для включения строки URL как части нашего контента.

Идеальный вариант использования для этого - всплывающая подсказка. Вы можете добавить titleатрибут к элементу в HTML, чтобы иметь простую встроенную подсказку при наведении курсора. Но чтобы настроить это, мы можем использовать атрибут данных в нашем HTML-теге, а затем использовать contentсвойство для добавления всплывающей подсказки.

В этом примере мы используем атрибут data-tooltipиз нашего HTML-элемента для передачи значения в нашу всплывающую подсказку. Для указателя всплывающей подсказки мы устанавливаем contentзначение "", contentнеобходимое для визуализации псевдоэлемента ::beforeили ::after.

Счетчики

Функция counter()CSS возвращает строку, представляющую текущее значение названного счетчика. В следующем примере у нас есть упорядоченный список, в который мы будем добавлять контент с помощью файла counter.

    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

    Не вдаваясь в подробности counterфункции, мы должны сначала запустить счетчик olэлемента. Мы можем назвать это как угодно. Затем мы говорим счетчику увеличиваться для каждого liэлемента. И , наконец, мы устанавливаем contentиз li::after.

    Вот результат:

    Упорядоченный список

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

    Изображений

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

    Для доступности также есть возможность добавить альтернативный текст для изображения. Однако эта функция не полностью поддерживается.

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    Примечание. Это не поддерживается в Firefox, IE и Safari. Также градиент не работает в Firefox.

    Вне псевдоэлементов

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

    Наиболее совместимым вариантом использования будет замена элемента.

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    Примечание. Замена не поддерживается в IE.

    Вывод

    В большинстве случаев вы увидите content: ""псевдоэлементы ::beforeи ::after. Но у contentсвойства есть много полезных приложений.

    На мой взгляд, лучше всего использовать его для обновления массовых элементов. Если вы хотите добавить значок перед каждой ссылкой на своем сайте, было бы намного проще добавить его через contentсвойство, чем добавлять его к каждому элементу в документе HTML.

    Спасибо за прочтение!

    Спасибо, что прочитали эту статью. Надеюсь, это помогло вам лучше понять, как contentсвойство работает в CSS.

    Джесси Холл (codeSTACKr)Я Джесси из Техаса. Ознакомьтесь с другими моими материалами и дайте мне знать, как я могу помочь вам на вашем пути к тому, чтобы стать веб-разработчиком.

    • Подпишитесь на мой YouTube
    • Скажи привет! Instagram | Twitter
    • Подпишитесь на мою рассылку