CSS до та CSS після - Як використовувати властивість Content

Програмування

contentВластивість в CSS визначає вміст елемента. Можливо , ви чули , що це властивість застосовується тільки до ::beforeі ::afterпсевдо-елементів. У цій статті ми розглянемо різні варіанти використання contentвластивості, в тому числі поза псевдоелементами.

Обов’язкова умова

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

  • Псевдоелементи CSS - пояснення до та після селекторів

Прийняті цінності

Спочатку давайте подивимось на всі прийняті значення contentвластивості.

  • normal: Це значення за замовчуванням. Обчислюється noneпри використанні з псевдоелементами.
  • none: Псевдоелемент не генерується.
  • : Встановлює вміст до вказаного рядка. Цей рядок може містити вхідні послідовності Unicode. Наприклад, символ авторського права: \\000A9.
  • : Встановлює вміст для зображення або градієнта за допомогою url()або linear-gradient().
  • open-quote| close-quote: Встановлює вміст до відповідного лапки, на яке посилається quotesвластивість.
  • no-open-quote| no-close-quote: Видаляє лапку з вибраного елемента, але все одно збільшує або зменшує рівень вкладеності, на який посилається quotesвластивість.
  • attr(*attribute*): Встановлює вміст як значення рядка для вибраних атрибутів вибраних елементів.
  • counter(): Встановлює вміст як значення а 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.

    Джессі Холл (кодSTACKr)Я Джессі з Техасу. Перевірте інший мій вміст і повідомте мені, як я можу допомогти вам у вашій подорожі до того, щоб стати веб-розробником.

    • Підписатися на мій YouTube
    • Привітайся! Instagram | Twitter
    • Підпишіться на мою розсилку