CSS Преди и CSS След - Как да използвам свойството на съдържанието

В contentимота в CSS определя съдържанието на елемент. Може да сте чували, че това свойство се отнася само за ::beforeи ::afterпсевдоелементите. В тази статия ще разгледаме различни случаи на използване на contentсвойството, включително извън псевдоелементите.

Предпоставка

Тъй като по-голямата част от случаите на употреба за contentимота включва псевдо-елементи, бих предложил, че можете да сте запознати с начина, по който ::beforeAND ::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(): Задава съдържанието като стойност на 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 в CSS contentсвойството. Всъщност използвахме това вече в примера за връзка, където използвахме 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
    • Регистрирайте се за моя бюлетин