Содержание

Псевдоэлемент :before | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+4.0+9.21.0+1.0+3.5+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Для :before характерны следующие особенности.

  • При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item.
    Все остальные значения будут трактоваться как block.
  • При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
  • :before наследует стиль от элемента, к которому он добавляется.

Синтаксис

элемент:before { content: «текст» }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li:before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Рис. 1. Использование псевдоэлемента :before в списках

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset>.

Firefox до версии 3.5 не допускает применение к :before свойств position, float, list-style-type и некоторых значений display.

примеры, правила. Предлоги «после» и «до» в английском языке

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

AfterBefore

1. Для обозначения времени: после, спустя какое-то время, событие или действие.

 

You are not allowed to buy alcohol after 10 pm.

После 22.00 покупка алкоголя запрещена.

I usually read after dinner.

Я обычно читаю после ужина.

Wash your hands after working with chemicals.

Мойте руки после того, как поработали с химическими веществами.

1. Для обозначения времени: до, перед каким-либо временем, событием, действием.

 

I’ll finish before 6.

Я закончу до 6.

Before the war I was a teacher.

До войны я был учителем.

I have a shower before I go to bed.

Я принимаю душ перед сном.

2. Для обозначения места: вслед, за.

 

Turn left after the pub.

За пабом поверните налево.

I’m not going to clean after you!

Я не собираюсь за вами убирать!

Close the door after me!

Закрой за мной дверь.

“Don’t come back!” she yelled after him.

“И не возвращайся!”, — крикнула она ему вслед.

2. Для обозначения места: перед, до.

 

The shop is just before you get to the crossroads.

Магазин — прямо перед перекрестком.

We stopped a few kilometers before the border.

Мы остановились за несколько километров до границы.

3. Другие значения.

Искать, ловить.

The police are after him for arson

Полиция ищет его за поджог.

Run, go, drive after — преследовать.

The dog ran after him.

Собака побежала за ним.

В честь.

She was named after a famous actress.

Ее назвали в честь знаменитой актрисы.

. Другие значения.

Для обозначения чего-то в будущем.

 

I have the whole week before me.

У меня впереди целая неделя.

Фразы с after:

  • day after day (week after week, year after year) – день за днем (неделя за неделей, год за годом)

  • the day after (the week after, the year after) – спустя день, неделю, год

  • after a while – спустя некоторое время

  • after all – в конце концов

  • after you! — только после вас!

 

Фразы с before:

  • the day, week, weekend before – за день, неделю, выходные до этого

  • the day before yesterday – позавчера.

 

Unit 105 Предлоги времени — before / after / during / while

Предлоги времени – до / после / во время / в течение

before [bɪ’fɔː] прежде, раньше, до. – before the film (до фильма)
– Before the examination everybody was very nervous.  Перед экзаменом все очень нервничали.

during [‘djuərɪŋ] в течение, в продолжение, во время – during the film (во время фильма)
– I went to sleep during the film.  Я уснул во время фильма.

after [‘ɑːftə] после, за – after the film (после фильма)
– We were tired after our visit to the museum. Мы были уставшие после посещения музея.

before we played (до того, как мы сыграли)
– Don’t forget to close the window before you go out.  Не забудь закрыть окно перед уходом.

while [waɪl] we were playing (пока мы играли) во время действия, процесса
– I went to sleep while I was watching television.   Я заснул, пока смотрел телевизор.

after we played (после того, как мы сыграли)
– They went home after they did the shopping.  Они пошли домой после того, как сделали покупки.

Используем

during (в продолжение, во время) + существительное (during the film – во время фильма)

– I went to sleep during the film.  Я уснул во время фильма.

while + глагол, процесс (while I was watching)

– I went to sleep while I was watching TV.  Я уснул во время того, как смотрел телевизор.

Можно использовать

gerund (-ing) после before и after

– Before eating the apple, I washed it.  Перед тем, как съесть яблоко, я помыл его.
– After doing the shopping, they went home.  После покупок в магазине, мы поехали домой. 

During. Произношение, применение.

Смотри также

< 104 from … to until since for

106 in at on (places 1) >

 

 

» Урок 98: Временные предлоги и союзы before/after/during/while » Грамматика английского языка » English Tutorial: Уроки английского онлайн

1

Слова before/after выступают в качестве предлогов, когда ставятся перед существительным, имеющим временной контекст.

Tom often watches TV after 11 o’clock. Том часто смотрит телевизор после 11 часов.
Our team practised a lot before the game. Наша команда много тренировалась перед игрой.

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

Jonathan forgot his keys before he left. Джонатан забыл свои ключи перед тем, как ушел.
After I finished my dinner, I went to bed. Я пошел спать после того, как поужинал.

Также мы можем использовать союзы before/after вместе с герундием, заменив им подлежащее и сказуемое в придаточном предложении.

Jonathan forgot his keys before leaving. Джонатан забыл свои ключи перед уходом.
After finishing my dinner, I went to bed. После ужина я пошел спать.

2

Оба слова определяют период, в течение которого проиcходит некое событие. При этом during всегда стоит перед существительным, а while — перед глагольной формой. Сравните:

George told us an amazing story during breakfast (Неправильно: while breakfast). Джордж рассказал нам удивительную историю во время завтрака.
George told us an amazing story while we were having breakfast. Джордж рассказал нам удивительную историю, пока мы завтракали.

Старайтесь не путать предлоги during и for

. Первый сообщает нам о том, когда происходит событие, второй — как долго оно длится.

I was ill during January (= in January). Я болел в январе.
I was ill for a month (Неправильно: during a month). Я болел в течение месяца.

3

Если контекст сложноподчиненного предложения относится к будущему, то его придаточная часть идет в настоящем времени. Это правило справедливо для всех временных союзов (after/before/while/until/when и т.д.).

I’ll phone you after I come (Неправильно: after I’ll come

). Я позвоню тебе после того, как приеду.
Don’t forget your keys before you go out. Не забудь ключи перед тем, как выйдешь из дома.
Oliver is going to visit his friends in Ireland while he is there. Оливер собирается посетить своих друзей в Ирландии, пока он там будет.

Упражнения «Придаточные предложения времени с союзами «before, after, as soon as, when, while, as, until, till» (с ответами)

1. Выберите в скобках верный вариант союза времени. Переведите предложения.

  1. Please, call me … (while/as soon as/till) you arrive at the station.
  2. … (Until/After/Before) going to sleep, she likes reading a book for an hour or so.
  3. Don’t sit down … (until/after/while) we ask you.
  4. The house became empty … (after/before/until) they left.
  5. I won’t start my journey … (when/while/until) he pays all my expenses.
  6. … (As soon as/While/Before) he was making a fire, it started raining.
  7. … (While/Till/As soon as) we get married, we’ll move to another place.
  8. Turn off the light … (before/when/while) the lesson is over.
  9. You should read this paper … (before/until/while) you express your opinion.
  10. We won’t start our dinner … (after/until/as soon as) Richard arrives.

2. Соедините два простых предложения в одно сложное, используя предложенный союз в скобках.

Например:  Don’t call your uncle. First I’ll tell you. (till) – Don’t call your uncle till I tell you. (Не звони своему дяде, пока я не скажу тебе.)

  1. Tom will come in a minute. Then I will go to the chemist’s. (as soon as)
  2. I will come home soon. I want to have a foam bath. (when)
  3. We are moving to Miami. Then we’ll invite you to our house. (after)
  4. You will need my car. But first let me know. (before)
  5. Alice will be picking up the berries. Sam will be cutting the grass. (while)
  6. She will have finished her homework in half an hour. Then she will go for a walk. (after)
  7. Dad will have repaired the van by Saturday. Then we’ll travel to the lakes. (as soon as)
  8. You must clean your teeth. Then you may go to bed. (until)
  9. I will get my salary next week. Then I will buy a new smart phone. (when)
  10. First wait for the green light on. Then you can cross the street. (before)

3. Поставьте глаголы из скобок в необходимой видо-временной форме.

Например: He … (help) us with the housework before the party … (start). – He will help us with the housework before the party starts. (Он поможет нам с уборкой по дому до того, как начнется вечеринка.)

  1. You need to buy a present before your wife … (come).
  2. I … (drop) my keys as I was leaving the apartment.
  3. As soon as you sign the contract we … (send) the payment.
  4. After the princess fell asleep, she … (have) a scary dream.
  5. Robert woke up while the sun … (rise).
  6. After he … (break) his arm he never … (play) volleyball again.
  7. She was doing shopping while her sister … (wash) the windows.
  8. We’ll go to the beach as soon as the film … (be over).
  9. Don’t eat chocolate until your allergy … (disappear).
  10. Can you feed my cats when I … (go) on holiday?

 

Ответы:

1.

  1. as soon as (Пожалуйста, позвони мне, как только приедешь на вокзал.)
  2. Before (Перед тем, как ложиться спать, она любит почитать книгу где-то около часа.)
  3. until (Не садитесь, пока мы не попросим вас.)
  4. after (Дом опустел после того, как они уехали.)
  5. until (Я не начну свое путешествие, пока он не оплатит все мои расходы.)
  6. While (В то время, когда он разводил костер, начался дождь.)
  7. As soon as (Как только мы поженимся, мы переедем в другое место.)
  8. when (Выключайте свет, когда урок закончен.)
  9. before (Вам следует почитать этот документ, прежде чем высказывать свое мнение.)
  10. until (Мы не приступим к ужину, пока не приедет Ричард.)

2.

  1. As soon as Tom comes, I will go to the chemist’s. (Как только придет Том, я пойду в аптеку.)
  2. When I come home I will have a foam bath. (Когда я приду домой, я приму ванну с пеной.)
  3. After we move to Miami, we’ll invite you to our house. (После того, как мы переедем в Майами, мы пригласим тебя в наш дом.)
  4. Please, let me know before you need my car. (Дай мне знать, прежде чем тебе будет нужна моя машина.)
  5. While Alice will be picking up the berries, Sam will be cutting the grass. (В то время, как Алиса будет собирать ягоды, Сэм будет стричь траву.)
  6. After she has finished her homework, she will go for a walk. (После того, как она закончит домашнюю работу, она пойдет гулять.)
  7. As soon as dad has repaired the van, we’ll travel to the lakes. (Как только папа починит грузовик, мы отправимся на озера.)
  8. You won’t go to bed until you clean your teeth.(Ты не пойдешь спать, пока не почистишь зубы.)
  9. When I get my salary I will buy a new smart phone. (Когда я получу зарплату, я куплю новый смартфон.)
  10. Don’t cross the street before you see the green light on.(Не переходи улицу, пока не увидишь зеленый свет.)

3.

  1. comes (Тебе нужно купить подарок до того, как придет твоя жена. )
  2. dropped (Я выронил ключи в то время, как выходил из квартиры.)
  3. will send (Как только вы подпишете контракт, вы вышлем оплату.)
  4. had (После того, как принцесса уснула, ей приснился страшный сон.)
  5. was rising (Роберт проснулся в то время, как солнце вставало.)
  6. broke – played (После того, как он сломал руку, он больше никогда не играл в волейбол.)
  7. was washing (Она занималась покупками в то время, как ее сестра мыла окна.)
  8. is over (Мы пойдем на пляж, как только закончится фильм.)
  9. disappears (Не ешь шоколад, пока не исчезнет твоя аллергия.)
  10. go (Ты можешь покормить моих кошек, когда я уеду в отпуск?)

Упражнения «Придаточные предложения времени с союзами «before, after, as soon as, when, while, as, until, till» (с ответами) — 4.7 out of 5 based on 15 votes

Добавить комментарий

before — Викисловарь

Морфологические и синтаксические свойства[править]

be-fore

Наречие; неизменяемое.

Корень: —.

Произношение[править]

Семантические свойства[править]

Значение[править]
  1. впереди; вперёд ◆ marching on before — двигаясь впереди [≈наречие 1][≠наречие 1][▲наречие 1][▼наречие 1]
  2. прежде, раньше, сначала ◆ long before — задолго до того ◆ I knew her from before. — Я знал ее до этого. [≈наречие 2][≠наречие 2][▲наречие 2][▼наречие 2]
Синонимы
Антонимы
Гиперонимы
Гипонимы

Фразеологизмы и устойчивые сочетания[править]

Родственные слова[править]

Ближайшее родство

Этимология[править]

Происходит от ??

Библиография[править]

Морфологические и синтаксические свойства[править]

be-fore

Предлог, неизменяемое слово.

Корень: —.

Произношение[править]

Семантические свойства[править]

Значение[править]
  1. до, раньше; без (указывает на предшествование во времени) ◆ аt twenty minutes before eight o’clock — без двадцати минут восемь ◆ before long — скоро, вскоре ◆ the day before yesterday — позавчера, третьего дня [≈предлог 1][≠предлог 1][▲предлог 1][▼предлог 1]
  2. перед/передо (указывает на нахождение или движение перед кем-л. / чем-л. в пространстве) ◆ I think you were before me in the queue. — Мне кажется, вы стояли передо мной в очереди. [≈предлог 2][≠предлог 2][▲предлог 2][▼предлог 2]
  3. перед лицом, в присутствии ◆ the case before the court — дело, рассматриваемое судом [≈предлог 3][≠предлог 3][▲предлог 3][▼предлог 3]
  4. впереди, перед (указывает на что-л. предстоящее) ◆ Your whole life is before you. — У тебя вся жизнь впереди. [≈предлог 4][≠предлог 4][▲предлог 4][▼предлог 4]
  5. перед, впереди, выше, с преимуществом по сравнению с ◆ to put quantity before quality — ставить количество выше качества [≈предлог 5][≠предлог 5][▲предлог 5][▼предлог 5]
Синонимы
Антонимы
Гиперонимы
Гипонимы

Фразеологизмы и устойчивые сочетания[править]

Родственные слова[править]

Ближайшее родство

Этимология[править]

Происходит от ??

Библиография[править]

Морфологические и синтаксические свойства[править]

be-fore

Союз; неизменяемое.

Корень: —.

Произношение[править]

Семантические свойства[править]

Значение[править]
  1. прежде чем, до того как ◆ Call me before you go.  — Позвони мне, прежде чем уедешь. ◆ I’ll be done before you know it. — Со мной разделаются прежде, чем ты узнаешь об этом. [≈союз 1][≠союз 1][▲союз 1][▼союз 1]
  2. нежели; скорее…, чем … ◆ He would starve before he’d steal. — Он скорее умрёт с голоду, чем украдёт. [≈союз 2][≠союз 2][▲союз 2][▼союз 2]
Синонимы
Антонимы
Гиперонимы
Гипонимы

Фразеологизмы и устойчивые сочетания[править]

Родственные слова[править]

Ближайшее родство

Этимология[править]

Происходит от ??

Библиография[править]

: before или :: after?

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут «не сработать»?

Условия для работы after и before

Псевдоклассы применимы к любым парным контейнерам, т.е. тегам которые могут «обернуть» какой то контент, имеют открывающийся и закрывающийся теги. К примеру, с <img> они не работают, а со <span></span> — пожалуйста.

Вторым важным требованием для «срабатывания» является наличие CSS свойства content.

Т.е. вот так, мы не получим никакого эффекта:

.test::after { width: 100px; height: 50px; background: #f0f000; display: block; //content: » After «; }

.test::after {

  width: 100px;

  height: 50px;

  background: #f0f000;

  display: block;

  //content: » After «;

}

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

.test::after {  content: «»; }

.test::after {

 content: «»;

}

Одно двоеточие или два?

Работают одинаково как тот, так и другой вариант. Двойное двоеточие появилось в спецификации CSS3 как желание упорядочить псевдоклассы, но поддержка другого варианта осталась.

.test::before{ .. } .test:before { .. }

.test::before{

  ..

}

.test:before {

  ..

}

Где в DOM располагаются :after и :before?

Из-за того, что контейнеры отсутствуют в реальном HTML коде, возникает путаница : до чего (before) и после (after) чего?

Псевдо-контейнеры находятся внутри контейнера, к которому применяются, располагаясь до (before) или после (after) содержимого.

Вот небольшая иллюстрация:

HTML код примера

<div> <div>Content</div> </div>

<div>

  <div>Content</div>

</div>

CSS

// основной контейнер (большой серый) .test { width: 300px; height: 150px; background: #f0f0f0; } // его содержимое — темно серый прямоугольник .test .content { width: 100px; height: 50px; background: #d0d0d0; } // псевдо-класс after, желтый .test::after { width: 100px; height: 50px; background: #f0f000; display: block; content: » After «; } // псевдо-класс before, лиловый .test::before { width: 100px; height: 50px; background: #f000f0; display: block; content: » 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

// основной контейнер (большой серый)

. test {

  width: 300px;

  height: 150px;

  background: #f0f0f0;

}

// его содержимое — темно серый прямоугольник

.test .content {

width: 100px;

height: 50px;

background: #d0d0d0;

}

// псевдо-класс after, желтый

.test::after {

width: 100px;

height: 50px;

background: #f0f000;

display: block;

content: » After «;

}

// псевдо-класс before, лиловый

.test::before {

width: 100px;

height: 50px;

background: #f000f0;

display: block;

content: » Before «;

}

Если основной контейнер имеет относительное позиционирование, то задав псевдо-контейнерам абсолютное позиционирование, можно манипулировать их положением относительно основного.

:: before (: before) — CSS: каскадные таблицы стилей

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

 
a :: before {
  содержание: «♥»;
}  
 
::перед


: до

Примечание: CSS3 представил нотацию :: before (с двумя двоеточиями), чтобы отличать псевдоклассы от псевдоэлементов.Браузеры также принимают : до , введенного в CSS2.

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

Одним из простых примеров использования псевдоэлементов :: before является использование кавычек. Здесь мы используем как :: before , так и :: after , чтобы вставить символы кавычек.

HTML 
   Некоторые цитаты , по его словам,  лучше, чем ничего.
CSS 
  q :: before {
  содержание: """;
  цвет синий;
}

q :: after {
  содержание: """;
  красный цвет;
}
Результат

Декоративный пример

Мы можем стилизовать текст или изображения в свойстве content почти так, как захотим.

HTML 
   Обратите внимание на оранжевую рамку.
CSS 
  .ribbon {
  цвет фона: # 5BC8F7;
}

.ribbon :: before {
  content: «Посмотрите на эту оранжевую рамку.»;
  цвет фона: # FFBA10;
  цвет границы: черный;
  стиль границы: пунктирная;
}
Результат

Список дел

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

HTML 
  
    
  
  •  Купите молоко. 
    • 
  
  •  Выведите собаку на прогулку. 
    • 
  
  •  Упражнение 
    • 
  
  •  Написать код 
    • 
  
  •  Включи музыку 
    • 
  
  •  Расслабьтесь 
    •
CSS 
  li {
  тип-стиль-список: нет;
  положение: относительное;
  маржа: 2 пикселя;
  заполнение: 0.5em 0.5em 0.5em 2em;
  фон: светло-серый;
  семейство шрифтов: без засечек;
}

li. done {
  фон: # CCFF99;
}

li.done :: before {
  содержание: '';
  позиция: абсолютная;
  цвет границы: # 009933;
  стиль границы: твердый;
  ширина границы: 0 0.3em 0.25em 0;
  высота: 1em;
  верх: 1.3em;
  слева: 0,6em;
  маржа сверху: -1em;
  преобразовать: повернуть (45 градусов);
  ширина: 0,5 мм;
}
JavaScript 
  var list = document.querySelector ('ul');
list.addEventListener ('щелчок', функция (ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle ('готово');
  }
}, ложный);

Вот пример кода выше, работающий в реальном времени.Обратите внимание, что здесь не используются значки, а галочка — это фактически :: до , стилизованные в CSS. Давай, сделай кое-что.

Результат

Специальные символы

Как это CSS; не HTML, вы можете , но не использовать объекты разметки в значениях содержимого. Если вам нужно использовать специальный символ, и вы не можете ввести его буквально в строку содержимого CSS, используйте escape-последовательность Unicode, состоящую из обратной косой черты, за которой следует шестнадцатеричное значение Unicode.

HTML 
  
    
  
  1.  Разбить яйца в миску 
    2. 
  
  2.  Добавьте молока 
    3. 
  
  3.  Добавьте муку 
    4. 
  
  4.  Тщательно перемешайте до однородного теста. 
    5. 
  
  5.  Налейте половник жидкого теста на горячую, смазанную маслом плоскую сковороду. 
    6. 
  
  6.  Жарить, пока верх блина не потеряет блеск. 
    7. 
  
  7.  Переверните и жарьте еще пару минут. 
    8. 
  
  8.  подавать с любимой начинкой. 
    9.
CSS 
  li {
  отступ: 0.5em;
}

li [aria-current = 'step'] {
  font-weight: жирный;
}

li [aria-current = 'step'] :: after {
  содержание: "\ 21E6";
  дисплей: встроенный;
}
Результат

таблицы BCD загружаются только в браузере

:: after (: after) — CSS: каскадные таблицы стилей

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

 
a :: after {
  содержание: «→»;
}  
 
::после


: после

Примечание: CSS3 представил нотацию :: after (с двумя двоеточиями), чтобы отличать псевдоклассы от псевдоэлементов. Браузеры также принимают : после , введенного в CSS2.

Простое использование

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

HTML 
  
 Вот простой старый скучный текст. 


 Вот обычный текст, который не скучен и не интересен. 


 Внести свой вклад в MDN легко и весело.
CSS 
  .exciting-text :: after {
  content: «<- ЗАХВАТЫВАЕТ!»;
  цвет: зеленый;
}

.boring-text :: after {
  содержание: «<- СКУЧНО»;
  красный цвет;
}
Результат

Декоративный пример

Мы можем стилизовать текст или изображения в свойстве content почти так, как захотим.

HTML 
   Посмотрите на оранжевую рамку после этого текста.
CSS 
  .ribbon {
  цвет фона: # 5BC8F7;
}

.ribbon :: after {
  content: «Это необычная оранжевая коробка.»;
  цвет фона: # FFBA10;
  цвет границы: черный;
  стиль границы: пунктирная;
}
Результат

Tooltips

В этом примере для создания всплывающих подсказок используется :: after в сочетании с CSS-выражением attr (), и настраиваемым атрибутом данных data-descr .Никакого JavaScript не требуется!

Мы также можем поддержать пользователей клавиатуры с помощью этой техники, добавив tabindex из 0 , чтобы сделать каждый диапазон фокусируемым, и используя селектор CSS : focus . Это показывает, насколько гибкими могут быть :: до и :: после , хотя для наиболее доступного опыта виджет семантического раскрытия, созданный каким-либо другим способом (например, с деталями и сводными элементами), вероятно, будет более подходящим.

HTML 
  
 Вот несколько
   текст  с несколькими
   всплывающих подсказок .
CSS 
  span [data-descr] {
  положение: относительное;
  текст-оформление: подчеркивание;
  цвет: # 00F;
  курсор: справка;
}

span [data-descr]: hover :: after,
span [data-descr]: focus :: after {
  содержимое: attr (описание-данные);
  позиция: абсолютная;
  слева: 0;
  верх: 24px;
  минимальная ширина: 200 пикселей;
  граница: 1px #aaaaaa solid;
  радиус границы: 10 пикселей;
  цвет фона: #ffffcc;
  отступ: 12 пикселей;
  цвет: # 000000;
  размер шрифта: 14 пикселей;
  z-индекс: 1;
}
Результат

таблицы BCD загружаются только в браузере

Топ-3 использования псевдоэлементов CSS :: before и :: after

Не секрет, что я фанат псевдоэлементов :: before и :: after. В предыдущем посте я использовал их для создания затемненных оверлеев.

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

Но сначала краткое объяснение того, как работают псевдоэлементы.

Примечание о фактическом использовании :: after и :: before

Браузер будет отображать эти элементы как «сгенерированное содержимое» тогда и только тогда, когда они имеют значение для свойства content . Это значение может быть пустой строкой: content: ""; .

Когда браузер вставляет этот элемент в DOM, он вставляет его ВНУТРИ элемента, который вы используете для селектора. Вот определение из спецификации:

:: before Представляет стилизованный дочерний псевдоэлемент непосредственно перед фактическим содержимым исходного элемента .

:: after Представляет стилизованный дочерний псевдоэлемент сразу после фактического содержимого исходного элемента .

По умолчанию этот новый элемент будет встроенным.После того, как элемент вставлен в DOM, его можно изменить, как и любой другой элемент. Это дает нам много возможностей для любых развлечений.

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

Добавление значка рядом с определенными типами ссылок

Если вы хотите предоставить пользователям немного больше визуальной информации о том, что ссылка собирается делать, вы можете использовать :: after, чтобы добавить значок без добавления разметки.= "http"] :: после {
background-image: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
размер фона: содержать;
содержание: "";
дисплей: встроенный блок;
vertical-align: middle;
ширина: 1em;
высота: 1em;
}

В этом коде мы находим любой тег привязки, у которого есть элемент href, начинающийся с http. Это предполагает, что вы пишете свои внутренние ссылки как относительные пути.

Еще один хороший вариант использования этого метода — файлы PDF.

  a [href $ = ". Pdf"] :: после {
 content: "(pdf)"; 
 font-size: .8em; 
 цвет: помидор; 
}

К любому href, оканчивающемуся на .pdf, мы можем добавить строку «(pdf)». Этим элементом :: after легче управлять, чем изображением, поскольку у нас есть полный контроль над CSS и мы можем настроить размер шрифта, цвет и любые другие свойства.

Для получения дополнительной информации о черной магии этих селекторов прочтите этот замечательный учебник по CSS-Tricks.

Поиграйте с ними на CodePen

Добавление интересных «границ» к контейнерам

Пока Houdini Paint API не появится во всех браузерах, вы можете застрять с очень скучными границами для ваших элементов.Используя простой CSS и :: before и :: after, вы можете привнести интересные идеи во все браузеры.

 .  Related-article {
 padding: 20px; 
 позиция: относительная; 
 background-image: linear-gradient (120deg, # eaee44, # 33d0ff); 
} 
 
 .related-article * {
 position: relative; // Устанавливаем контекст наложения, чтобы контент оставался поверх фона 
} 
 
 .related-article :: before {
 content: ""; 
 цвет фона: #fff; 
 дисплей: блочный; 
 позиция: абсолютная; 
 верх: 10 пикселей; 
 слева: 10 пикселей; 
 width: calc (100% - 20px); 
 height: calc (100% - 20 пикселей); 
}

В этом примере мы применяем фоновый градиент к родительскому элементу и используем элемент :: before, чтобы «вырезать» интерьер с помощью простого цвета фона.Это дает вид границы, несмотря на то, что это два прямоугольника. Чтобы правильно подобрать размер для вашей границы, достаточно простой математики.

Позиционируя псевдоэлемент absolute, мы контролируем его размещение. Sass может упростить эту математику с помощью переменных и математических функций, если это поразит вас.

Поиграйте с этим на CodePen

Что делать, если мы хотим, чтобы под заголовками были небольшие причудливые границы?

Для этого мы можем использовать элемент :: after.

  .cool-border :: после {
 content: ""; 
 дисплей: блочный; 
 высота: 7 пикселей; 
 background-image: linear-gradient (120deg, # e5ea15, # 00c4ff); 
 позиция: абсолютная; 
 top: calc (100% + 5px); 
 осталось: 50%; 
 ширина: 45%; 
 преобразование: translateX (-50%) skew (-50deg); 
} 
 
 .cool-border {
 position: relative; 
}

В этом примере мы также позиционируем псевдоэлемент абсолютным. Размер нашей «границы» определяется высотой нового элемента.Если бы это была правая или левая «граница», вы бы использовали ширину элемента для определения размера.

Так как это всего лишь элемент на странице, мы также можем сместить границу. Прямоугольники были такими 2005!

Поиграйте с этим на CodePen

Добавьте стилистические элементы, которые вам не нужны, добавьте разметку для

— отличный семантический элемент. Не будем портить его лишней разметкой.

Во многих примерах :: after (включая другие в этом посте) вы видите псевдоэлементы position: absolute .Нет правила, которое гласит, что это должно быть именно так.

Давайте использовать :: before и :: after в качестве элементов сетки, чтобы поместить кавычки на

.

Благодаря явному размещению всего нашего контента в сетке нам не нужно беспокоиться о дополнительных оболочках. Мы также можем использовать кавычки в качестве фоновых изображений и позволить им масштабироваться с помощью простой функции minmax в наших grid-template-columns .

Что мне не хватает?

Есть много отличных идей по использованию :: after и :: before. Что мне не хватает? Вы использовали псевдоэлементы в своей повседневной разработке?

Связанные материалы

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

Селектор до

Селектор CSS :: before можно использовать для вставки содержимого перед содержимым выбранного элемента или элементов. Он используется путем присоединения :: до к элементу, на котором он будет использоваться.

Давайте посмотрим на несколько примеров:

  p :: before {
  содержание: "* ";
}

охватывать.comment :: before {
  content: "Комментарий:";
  цвет синий;
}  
  
 До бесконечности и дальше! 


 Я Базз Лайтер. Я пришел с миром. 


 Да пребудет с вами сила. 


 Делай. Или нет. Попытки нет.

В приведенном выше примере мы добавляем звездочку и пробел перед каждым элементом абзаца на странице. Кроме того, мы добавляем синюю строку «Комментарий:» перед каждым элементом , охватывающим , с комментарием класса .

After Selector

Селектор CSS :: after может использоваться для вставки содержимого после содержимого выбранного элемента или элементов. Он используется путем присоединения :: после к элементу, на котором он будет использоваться.

Вот несколько примеров:

  .buzz :: after {
  содержание: «- Базз Лайтер»;
  цвет синий;
}

.yoda :: after {
  содержание: «- Йода»;
  цвет: зеленый;
}  
  
 До бесконечности и дальше! 


 Делай.Или нет. Нет попытки.

В приведенном выше примере мы добавляем синим цветом «- Buzz Lightyear» к элементу с классом buzz . Кроме того, мы добавляем «- Yoda» зеленым цветом к элементу с классом yoda .

Сравнение одинарного двоеточия и двойного двоеточия

Существует небольшая дискуссия о правильном способе использования псевдоэлементов - одинарное двоеточие старого стиля (: до ), используемое в спецификациях CSS 1 и 2, по сравнению с Рекомендация CSS3, двойное двоеточие ( :: до ), в основном до «установить различие между псевдоклассами и псевдоэлементами» .

Но по соображениям совместимости метод с одним двоеточием все еще принимается. Имейте в виду, что IE8 поддерживает только запись с одним двоеточием.

Дополнительная информация:

Классное использование псевдоэлементов :: before и :: after

Должен признаться: мне нравятся псевдоэлементы :: before и :: after .

Они похожи на парочку помощников в любом стильном приключении.

Как никогда не сталкиваться с миром в одиночестве - ведь везде было 1, теперь 3.

в 3 раза больше мощности. В 3 раза больше стильных предметов. В 3 раза больше потрясающих визуальных эффектов, которые вы можете создать.

Что такое псевдоэлементы?

Теперь, если вы никогда не сталкивались с :: before и :: after раньше, вы можете спросить: «Что это за псевдоэлемент :: before вы говорите? "

Вот 30-секундный обзор:

Псевдоэлементы - это «воображаемые» элементы, которые можно вставить в документ с помощью CSS. Например, если бы я напишите очень простой CSS:

  р :: до {
  content: «Здравствуйте!»;
}

Внезапно каждый элемент p на моей странице будет иметь слово «Hello», вставленное перед его содержанием. :: после псевдоэлемент аналогичен, но вместо этого идет после содержимого.

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

Если вы хотите более подробное введение, я рекомендую эту статью о Smashing Журнал. За В этой статье я собираюсь меньше сосредоточиться на том, как работают псевдоэлементы, и больше на ряде удивительных примеров того, ты можешь сделать.

Тем не менее, я хочу выделить одну небольшую ошибку, потому что она доставала мне столько раз. Многие из применений, которые мы рассмотрим включают графику, но не содержат слов. Это замечательно, но вы должны установить и свойство content , и если ваше содержимое пусто, отобразить свойство , иначе псевдоэлемент не будет отображаться. Меня это много раз кусало ... так что всегда помни чтобы начать с настройки содержимого. Если ваше использование полностью визуально, просто установите:

  содержание: "";
дисплей: встроенный блок;

Простое использование для :: before и :: after

Давайте начнем с простых способов использования :: до и :: после .

Пользовательские значки

Одно простое и распространенное, но очень полезное использование :: before - это добавление значков к элементам с определенным классом. Например, FontAwesome использует эту технику для реализации своих иконок. Вы можете использовать тот же подход, чтобы сделать свои собственные значки.

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

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

Посмотреть перо qvQJNG от Кевина Болла (@kball) на CodePen.

Цитаты

Еще одно отличное применение :: before и :: after - это добавление кавычек вокруг кавычек. Например, мы могли бы создать «цитату» класс, который применяет двойные кавычки до и после, и даже класс атрибуции, который добавляет m-тире:

Посмотреть перо Цитаты с использованием «До» и «После» Кевина Болла (@kball) на CodePen.

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

Расширенное использование до и после

Создание фигур

Одна из проблем при работе в HTML и CSS - ограниченное количество «базовых» форм, с которыми вам нужно работать.

По сути, каждый элемент представляет собой прямоугольник ... и затем, умело используя радиус границы и границы, вы можете либо округлить этот прямоугольник до овала или круга, наклонить углы или создать треугольник из него.Конечно, вы можете повернуть его, когда закончите используя преобразовать , но это все…

Но теперь с :: до и :: после у вас есть в 3 раза больше «блоков» для игры. Каждый можно трансформировать отдельно позиционируется и вращается. Это приводит к феноменальному выбору форм, которые вы можете создать с помощью чистого CSS.

Крис Койер из CSS Tricks составил здесь отличный список возможных форм, из которых я воспроизвел избранное ниже с использованием ZenDev.цветовая схема. com. Вы не поверите, но это всего лишь 1 элемент HTML!

Посмотреть перо Александр Футеков Инь-Ян в синем от Кевина Болла (@kball) на CodePen.

Отображение значений атрибутов

Еще одно замечательное применение псевдоэлемента :: before или :: after - отображение содержимого атрибута.

Вы можете сделать это, установив content , чтобы включить attr ([attributename])

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

Одно место, где я использовал это раньше, - слайдер ZURB Foundation. Ползунок работает, изменяя значение в скрытом ввод… но что, если бы мы хотели сделать текущее значение видимым на самом слайдере? Ручка, которая сейчас манипулируемый - это просто диапазон ... но он получает атрибут aria для текущего значения, aria-valuenow . Ссылаясь на это в псевдоэлементе с содержанием : attr (aria-valuenow) мы можем отобразить его прямо на дескрипторе.

Посмотреть перо Отображение значения ползунка с использованием :: before Кевин Болл (@kball) на CodePen.

Многоступенчатая анимация

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

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

Например, в этой статье показано, как создать причудливый эффект «блеска» на кнопке при наведении курсора (показано пером ниже).

Посмотреть перо Эффект кнопки Sheen от Кевина Болла (@kball) на CodePen.

С этим мы потенциально могли бы сделать множество забавных вещей. создавать супер крутые микровзаимодействия. Другой пример здесь визуально скрывает содержание слова и закручивает его при нажатии или наведении.

Посмотреть перо Word In Button Effect, автор - Кевин Болл (@kball) на CodePen.

Заключение

Существует , так что с этими псевдоэлементами можно сделать еще много , что трудно охватить все это.Вот некоторые из примеров Я нахожу особенно интересным - вам также может понравиться этот обзор на CSS-уловки - и если у вас есть какие-либо примеры, которые действительно впечатлили ВАС, свяжите меня с ними в комментариях ниже!

Если вам важна поддержка фронтенд-разработки, возможно, вас заинтересует мой еженедельный информационный бюллетень Friday Frontend. Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, учебные пособия и объявления по CSS / SCSS, JavaScript, а также множество других замечательных новостей Front-end.Войти Сейчас!

Просмотр архивов до и после в Remodelista

Просмотр архивов до и после в Remodelista Значок - Стрелка влево Значок, который мы используем для обозначения действия вправо. Значок - Стрелка вправо Значок, который мы используем для обозначения действия влево. Значок - Внешняя ссылка Значок, который мы используем, чтобы указать, что ссылка на кнопку является внешней. Значок - Сообщение Значок, который мы используем для представления действие электронной почты Значок - Вниз Шеврон Используется для обозначения раскрывающегося списка Значок - Закрыть Используется для обозначения действия закрытия Значок - Стрелка раскрывающегося списка Используется для обозначения раскрывающегося списка.Значок - Пин-код местоположения Используется для демонстрации местоположения на карте Значок - Уменьшение Используется для обозначения действия уменьшения масштаба на карте. Значок - Увеличение масштаба Используется для обозначения действия увеличения на карте. Значок - Поиск Используется для обозначения действия поиска. - Электронная почта Используется для обозначения действия emai. Иконка - Торговая марка FacebookFacebooks для использования в значках социальных сетей. Flipboard. Иконка - Торговая марка InstagramInstagrams для использования в социальных сетях. Иконка - Торговая марка PinterestPinterests для использования в социальных иконках. использовать в социальных сетях.Значок - Отметьте галочкой отметку напротив кнопок флажков. Показано 1-40 из 84 Фильтр по тегу: Выберите тег ... 10 Easy Pieces10 Favorites10 вещи никто не говорит You5 Favorites5 Быстрый FixesAccessoriesAgaAir PurifiersAirbnbAirstream TrailersAmerican MadeAmerican WestAmsterdamAntiques & VintageAntwerpApartmentsAppliancesApronsArchitect VisitArchitectural DetailsArchitecture & InteriorsArgentinaArizonaArmchairsArmoiresArt & DecorationArtist ResidenciesAsianAtlantaAtticsAudio EquipmentAustinAustraliaAustriaAutumnBacksplashesBags & LuggageBambooBar AccessoriesBar CartsBarcelonaBarn DoorsBarnsBasementsBaskets & BinsBath CaddiesBath LinensBath MatsBath TowelsBathroom AccessoriesBathroom CabinetsBathroom FaucetsBathroom HardwareBathroom Зеркало CabinetsBathroom из WeekBathroom хранения Тумба для ванной комнатыВанные комнатыВанныПляжные домикиПляжный стиль BeddingChildren игровой lendersBlueBohemianBookcases & BookshelvesBooksBootsBostonBotanical ArtBottlesBowlsBoxesBrassBrazilBread BoxesBrickBrick WallsBright & AiryBrit StyleBronzeBrooklynBrooms & DustpansBrownBrownstonesBrushesBrusselsBucketsBudapestBudgetBuenos AiresBuilt в FurnitureBuilt в StorageBulgariaBulletin BoardsBunk BedsBurlapButcher BlocksCabinet HardwareCabinets & SideboardsCafe ChairsCake StandsCalendarsCaliforniaCampersCampingCanadaCandle HoldersCandlesCaned FurnitureCanvasCape CodCarafesCarpetsCashmereCasserolesCast IronCeiling FansCeiling LightsCementCement FloorsCenterpiecesCentral AmericaCeramicCeramicsChairsChaisesChalkboardsChandeliersCharred WoodChicagoChicken CoopsChildren в AccessoriesChildren в BedsChildren письменных столов и TablesChildren-х FurnitureChildren игровой RoomsChildren игровой StyleChinaChineseChristmasCinderblocksCity StyleClassical & PeriodCleaningCleaning Продукты & ПринадлежностиЗажимные фонариЧасыСтеллаж для шкафаШкафыСушилка для одеждыВешалки для одеждыКрючки для одеждыХранение одеждыCo astersCoat HooksCoat RacksCocktail & BarCoffee & Side TablesCoffee & TeaCoffee MakersCoffee PotsCoffee Магазины и CafesColorColor-BlockingColoradoCommuneCompostingConcreteConcrete FloorsConnecticutConsidered Design Award WinnersConsidered Design Awards 2013Considered Design Awards 2014Considered Design Awards 2015Considered Design Awards 2017Considered Design Awards 2018ConstructionContemporaryCookbooksCooktopsCookwareCopenhagenCopperCorrugated MetalCottages & CabinsCottonCountertopsCourtyardsCoyuchiCrochetCupboardsCupsCurrent ObsessionsCurtainsCushionsCutting BoardsCyber ​​MondayCzech RepublicDanishDark & ​​MoodyDark WoodDaybedsDecks & PatiosDecorDecorationDenmarkDesign NewsDesign SleuthDesign ПутешествияТенденции в дизайнеDesigner Is InDesigner VisitСтолы для стола sDomestic ScienceDoor HardwareDoor MatsDoormatsDoorsDoorstopsDoorways & EntrywaysDouble SinksDrawer PullsDressers & WardrobesDrinks DispensersDryersDrying RackDublinDustpans & BrushesDutchDuvets & QuiltsEamesEasterEastern EuropeEat в KitchensEccentricEco-FriendlyEdge PullsEditors' PicksElectrical OutletsElectronicsEn люкс BathroomsEnamelwareEntertainingEntryway ShelvingEstoniaEventsExpert AdviceExposed BeamsExteriors & FacadesFabrics & LinensFallFamily StyleFansFarmhouse & Utility SinksFarmhouse StyleFarmhousesFarrow & BallFaucets & FixturesFeltFinlandFinnishFireplace AccessoriesFireplace ScreensFireplaces & HearthsFixtures & FittingsFlagsFlat -Упаковка МебельПлощадьНапольные лампыКоврики для полаПолЦветочныйЦветочный дизайнФлоренцияФлоридаЦветыСкладные стульяХранение продуктов питания ГрузовикиЧетверть июляКаркасыФранцияОтдельно стоящие ванны ndsGermanyGift Руководство 2015Gift Руководство 2016Gift Руководство 2017Gift Руководство 2018Gift Руководство 2019Gift Руководство 2020Gift GuidesGiftsGiveaways и ContestsGlamourGlasgowGlassGlass ShadesGlass WallsGlasswareGlobesGoldGrayGreeceGreekGreenGreen DesignGreenhousesGrills & BarbecuesGuest SpacesHalloweenHallwaysHammocksHandmadeHangers & RailsHanging LightsHanukkahHappier на HomeHardwareHeadboardsHeath CeramicsHenrybuiltHerbsHerringboneHidden BedsHigh / Low DesignHiking & Camping GearHipsters на HudsonHistoricHoliday DecorHoliday GiftsHolidaysHollywoodHome для HolidaysHome InspirationHome OfficesHoods & VentsHooks & HardwareHooks & РельсыПодарки для хозяевОтели и жильеДом и свадебные подаркиПокупка домаВозвон на домНомера домовТур по домуДомные лодкиКоммные растенияДомаHow-ToЛедяные ведраИсландияИдахоИдеи, чтобы украсть п AccessoriesKitchen техникаКухонной CabinetsKitchen ClocksKitchen DesignKitchen FaucetsKitchen FurnitureKitchen GardensKitchen IslandsKitchen баночка и StorageKitchen LinensKitchen из Корзины WeekKitchen RemodelsKitchen ShelvingKitchen SinksKitchen хранение и OrganizationKitchen SystemsKitchen ToolsKitchen TowelsKitchensKitchenwareKnife Блоки & RacksKnivesKyotoLALaddersLampsLampshadesLandscape ArchitectureLanternsLaundryLaundry & Utility RoomsLaundry & HampersLaundry RacksLaundry номер StorageLe CorbusierLeatherLED LightingLibrariesLight & AiryLight BulbsLight WoodLightingLinenLinensLiving RoomsLoft SpacesLondonLong Остров CityLos AngelesLounge СтульяНизкие стулья и пуфикиМакрамМадридЖурналыПочтовые ящикиМэнМалоркаКартыМраморМраморные ванные комнатыMarfaMarin CountyMarket ReportMasculineMassachusettsМатериалы об-WilliamsMobilesModernModernistMonogramsMontaukMontrealMoroccanMoroccan TilesMortar и PestlesMugsMulti-ColorMuseumsMy Первый ApartmentNapa и Sonoma Вино CountryNapkin RingsNapkinsNatural DecorNauticalNeonNetherlandsNew EnglandNew OrleansNew год EveNew Йорк CityNew Йорк StateNew ZealandNichesNorthern Калифорния Вино CountryNorwayNurseriesOakObject LessonsOchreOffice AccessoriesOffice ChairsOffice DesignOffice ElectronicsOfficesOhioOn MarketOpen покрытие PlansOpen ShelvingOrangeOregonOrganicOrnamentsOsloOttomansOutdoor & GardensOutdoor DiningOutdoor EntertainingOutdoor благоустройстваСредства LightingOutdoor ShowersOutdoor SpacesOvensPaintPaint ResourcesPainted CeilingsPainted FloorsPainted FurniturePainted WallsPalette И краскиПоддоныПальмовые источникиКладоваяБумагаБумажные фонариДержатели для бумажных полотенецПарижПассахПастельПодвесные светильникиПенсильванияМолоты для перцаПарфюмерияЛичный стильПерсональный контрольАксессуары для домашних животныхДомашние животныеФиладельфияКорзины для пикникаПикники s & CarafesPlacematsPlain EnglishPlanters & Plant StandsPlanters & PotsPlasterPlate RacksPlatesPlatform BedsPlay StructuresPlumbingPlumenPlywoodPocket DoorsPolandPorcelainPortable KitchensPortland ORPortugalPostersPot RacksPotholdersPots & PansPotteryPoufs & OttomansPowder RoomsPraguePrefab HousesProduct DiscoveriesProvincetownPuerto RicoPurpleQuiltsRADDRadiatorsRange HoodsRattanReader RehabReading LampsReading NooksRecipesReclaimed WoodRedRefrigerator DrawersRefrigeratorsRehab DiariesRejuvenationRemodel & RenovationRemodeling 101Remodelista BookRemodelista ExclusiveRemodelista MarketsRemodelista величайших HitsRental HousesRequired ReadingRestaurant VisitRetroRocking ChairsRoman & WilliamsRomanticRomeRoof GardensRoofing & FencingRoom DividersRopeRope DecorRugsRusticSafetySalesSalt И Шейкеры для перцаСолевые погребаСан-ДиегоЗалив Сан-ФранцискоСанта-БарбараСауныКилоркиСкандинавияСкандинавские НожницыБоксыШотландияОткрытые верандыСкульптураСидениеSeattle itsShakerShanghaiSheepskins & HidesSheetsShelvingShiplapShipping ContainersShoe BenchesShopper в DiaryShou Суги BanShower CurtainsShower DrainsShowersShowroomsShuttersSide TablesSilkSilverSingaporeSinksSkylightsSlateSleeping LoftsSliding Barn двериРаздвижные DoorsSlow DesignSmall AppliancesSmall KitchensSmall-Space FurnitureSmall-Space LivingSmart HomeSmoke AlarmsSoapSoap DishesSofas & CouchesSohoSonomaSouth AfricaSouth АмерикаЮжная CarolinaSouthwestSpa StyleSpace HeatersSpainSpanishSpanish StyleSpasSpeed ​​OvensSpicesSplatter-PaintedSponsored PostSpoonsSports EquipmentSpringStablesStackableStainless SteelStairwaysSteal Это LookSteelSteel для Windows & DoorsStep Табуреты & LaddersStereosStockholmStoneStone FloorsStoolsStorage И организацияКорзины для храненияМебель для храненияРешения для храненияИнтерьеры магазиновПлитки и тумбочкиСтрунные фонариПолоскиПосещение студииСтильСтиль СоветникПлитка метроСуккулентыЛетоЛетние домикиУстойчивый дизайнШвецияШведскийПлавательные бассейныШвейцарскиеПокрытия для переключателейПереключатели dSydneyTable LampsTable LinensTable из ContentsTable RunnersTableclothsTablesTablescapesTabletopTablewareTapes & CordsTask LightingTaxidermyTea SetsTea TowelsTeacupsTeapots & KettlesTechnologyTeen SpacesTelevisionsTents & TeepeesTerracottaTerrainTerrariumsTexasTextilesThanksgivingThe архитектор InThe дизайнер InThe Званый ужин ProjectTiffin TinsTiled FloorsTiled WallsTilesTissue BoxesTissue HoldersToaster OvensToastersToilet AccessoriesToilet Кисти и HoldersToilet Ролл HoldersToiletsTokyoToolsToothbrushesTorontoTotesTowel Бары и RingsTowel WarmersTowelsToysTraditionalTrash и RecyclingTravels с EditorTray DrawersTraysTrend AlertTrending на GardenistaTrending on The Organized Home Подставки на колесикахТумблерыСтоликиВеликобританияВеликобританияОбивкаUpstate New YorkГородской садовник VirginiaWalesWall DécorWall HooksWall LightsWall PanelingWall SconcesWall-монтируемые ToiletsWallpaperWallsWalls, Окна и FloorsWardrobesWash BasinsWashers и DryersWastebasketsWater DispenserWater DispensersWater FiltersWatering & IrrigationWeather ProofingWeddingsWeekend GuideWeekend SpotlightWellnessWest AfricaWest ElmWhiteWickerWilliamsburgWindow HardwareWindow Shades & CoveringsWindowsWindows & FloorsWine & Beer AccessoriesWineriesWinterWire BasketsWoodWood CeilingsWood CountertopsWood FloorsWood FurnitureWood PanelingWood-Горение StovesWooden SpoonsWoolWorkspacesWrapping Бумага и AccessoriesWreathsYellowYoga & Meditation Номера

v5. 0

CSS :: before / :: after

Список замечательных ссылок, статей, руководств и видео для изучения CSS :: before / :: after псевдоэлементов. Обновление статьи от ноября 2018.

  1. Технические характеристики
  2. Список литературы
  3. Статьи
  4. Учебники
  5. Примеры
  6. Видео
  7. Совместимость с браузером

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

:: before представляет стилизованный дочерний псевдоэлемент непосредственно перед фактическим содержимым исходного элемента. :: after представляет собой стилизованный дочерний псевдоэлемент сразу после фактического содержимого исходного элемента.

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

В CSS1-2 псевдоэлементам, как и псевдоклассам, предшествовали одиночные двоеточия. В CSS3 псевдоэлементы используют двойные двоеточия, чтобы отличать их от псевдоклассов.

Характеристики

Список литературы

Статьи

  • :: до vs: до https://css-tricks.com
    Обратите внимание на двойное двоеточие : до по сравнению с одинарным двоеточием : до . Который правильный? Технически правильный ответ - :: до .Но это не значит ...

    Крис Койер

  • Топ-3 использования псевдоэлементов CSS :: before и :: afterhttps: //bryanlrobinson.com
    Ни для кого не секрет, что я поклонник псевдоэлементов :: до и :: после . В предыдущем посте я использовал их для создания затемненных оверлеев. Хотя у них так много других применений ...

    , Брайан Робинсон

  • Три практических использования псевдоэлементов: before и: after CSS https: // wpshout.com /
    В моей работе : до и : после - это своего рода пожарная лестница, позволяющая быстро обойти проблемы, которые в противном случае могли бы быть решены.

    , Фред Мейер

  • Понимание свойства CSS "content" https://www.sitepoint.com
    Гаджендар Сингх разбирает свойство содержимого CSS с описаниями и демонстрациями для всех возможных значений.

    , Гаджендар Сингх

  • Понимание псевдоэлемента: до и: после https://www. hongkiat.com
    Каскадная таблица стилей (CSS) в первую очередь предназначена для применения стилей к разметке HTML, однако в некоторых случаях при добавлении дополнительной разметки в документ.

    , Торик Фирдаус

    • Учебники

    • Как: использовать CSS: после псевдоэлементов для создания простых наложений https: // bryanlrobinson.com
      Используйте : после элементов, чтобы создать самый простой HTML-код для визуализации полезных и забавных наложений поверх фоновых изображений. Затем расширите их с помощью режима смешивания !

      Брайан Робинсон

    • Создание анимации с помощью псевдоэлементов https://medium.com
      com/@simonpsteer/building-not-so-simple-animations-with-pseudo-elements-ff71d48682a7"> Каждый элемент имеет псевдоэлементы :: before и :: after , за исключением элементов, которые являются самозакрывающимися.Они живут внутри элемента; псевдоэлемент :: before принадлежит…

      Саймон Стир

    • Как создать красивый анимированный загрузчик, не используя ничего, кроме CSShttps: //codeburst.io
      Пример того, насколько творчески вы можете работать с псевдоэлементами и анимацией по ключевым кадрам. Используется в этом случае для создания анимации загрузчика без необходимости извлекать какие-либо JS или изображения.

      , Жюльен Беншетри

    • Как использовать псевдоэлементы CSS3 для создания асимметричных дизайнов https: // medium. com
      Асимметричные или диагональные элементы и неправильные углы стали популярны у веб-дизайнеров в последние годы. К счастью для нас, разработчиков, их довольно просто реализовать. Если ваш…

      , Роуз Готье

    • Анимация псевдоэлементов https://cssanimation.rocks
      Псевдоэлементы похожи на получение дополнительных элементов DOM бесплатно. Они позволяют нам добавлять дополнительный контент, украшения и многое другое на наши страницы без добавления лишнего HTML...

      от Донован

    • Настройте упорядоченные списки с помощью псевдоэлемента :: beforehttps: //blog.teamtreehouse.com
      Фактически, после этого урока вы сможете изменять шрифты, цвета и почти все остальные атрибуты стиля чисел в списках.

      Дэйв МакФарланд

    • Множественные фоны и границы с CSS 2.1nicolasgallagher.com
      Использование псевдоэлементов CSS 2.1 для предоставления до 3 фоновых полотен, 2 презентационных изображений фиксированного размера и нескольких сложных границ для одного элемента HTML. Этот метод прогрессивного улучшения работает для всех браузеров, которые поддерживают псевдоэлементы CSS 2.1 и их расположение.

      , Николас Галлахер

    Примеры

    • Эффекты при наведении курсора на подчеркивание текста
      Быстрые эксперименты с : до и : после , эффекты наведения на однострочные элементы.
    • Анимированное меню гамбургеров
      io/mdt2/pen/VMMmNX"> Анимированное гамбургерное меню с использованием :: до / :: после .
    • Эффект наведения псевдоэлемента
      Возьмите overflow: hidden из тега a, чтобы увидеть переход : before .
    • Счетчик на чистом CSS
      Подсчет с :: до и :: после содержимого. Счетчик на чистом CSS, вероятно, совершенно бесполезен...но возможно.
    • Кредиты - Cloverfield Lane, 10
      Думаю, теперь он наконец-то работает в IE! Анимация прокрутки теперь работает в IE - мне пришлось избегать calc , а также vh единиц. : до и : после букв скрыты в IE - «видимые» псевдоэлементы не отменяют скрытые родительские элементы, как это должно быть - мне пришлось полагаться на цвет вместо видимости, чтобы скрыть некоторые буквы . - Эбби МакТаггарт

    Видео

    Совместимость с браузером

    Могу ли я использовать css-gencontent? Данные о поддержке функции css-gencontent в основных браузерах от caniuse.

    No related posts.