CSS Pseudo elements Before and After: Examples

Decoration line - codepen.io/ann...
Quote and quotes - codepen.io/ann...
Hover for before - codepen.io/ann...
Style tag ol - codepen.io/ann...
______________
Website - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak и t.me/annbloknote
Telegram Chat - t.me/tpverstak...

[@glebbsif]

за пять минут можно узнать столько полезного, что дяди и за час не расскажут. ясно и доступно и понятно. Больше видосов!) Спасибо

[@annblok_webdev]

Видосы выходят раз в неделю ;)

[@ВладимирПутилин-ж7б]

Излишнего пиздостралания не надо.

[@vartessa]

Моя богиня. Целый час пыталась разобраться, а ты за 10 минут все разложила! Обожаю)

[@annblok_webdev]

🤗🤗🤗

[@olegplahotniy7307]

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

[@johnd1431]

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

[@Fenjkeee]

Если бы не твой коммент, я бы переключил

[@dinir1000]

@@johnd1431 ну уж очень быстро, для чайников это не есть правильно

[@lexantonov4467]

Как верстальщик со стажем, скажи пожалуйста Какой смысл в :after и :before, если все это можно сделать и с помощью других тегов?

[@lexantonov4467]

@@hikkikomori9072 тот же span

[@andreysorin3096]

Симпатичная и грамотная! Но есть уточнения. ":" - это псевдокласс (pseudo class), "::" - это псевдоэлемент (pseudo element) Поэтому для after, before правильнее именно так ::after Так как это - именно псевдоэлементы, а не классы. У самогО псевдоэлемента не может быть псевдокласса(hover, active, ...). Именно поэтому можно использовать только: myElement:hover::before , что означает: "браузер должен задать свойства псевдоэлемента ::before для элемента myElement в состоянии :hover "

[@meldanify]

поправил и, при этом, не унизил...Побольше бы таких людей как Вы!

[@arturdauzvardas3112]

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

[@annblok_webdev]

Я безумно рада, что вам понравился мой канал 🥳 Поздравляю вас с появлением красного значка!

[@ТарасГебуза]

Просто, доступно и без лишней болтовни. Однозначно лайк)

[@КатерниаЗадобрюк]

Як все доступно пояснюєте! Прям насолоджуюсь слухаючи вас.

[@alexvei7299]

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

[@annblok_webdev]

Спасибо, приятно знать, чтоы контент вам нравится 😊

[@oleksandr_999]

Ого, вот это вы крутая в этом. Я вообще в шоке как у вас все быстро и легко, это же сколько нужно было времени потратить на изучение))

[@annblok_webdev]

Спасибо 😊

[@TheLokomotivbj]

Очень информативно, полное отсутствие воды. Огромное спасибо!

[@mishasv1490]

Блин, я тебя обожаю, вчера промудохался с макетом, не мог понять как вставляются такие вот изображения, через before, теперь вроде понял)

[@GOts_ZiLLA]

Офигенная полезная информация! Спасибо, Анна! За шпаргалку по флексам - отдельный поклон, 2 страницы на учебе сделал благодаря ей!

[@annblok_webdev]

Здорово, я рада! 🤗

[@oLORDo]

Хорошо подготовилась, без лишней инфы, спасибо. С псевдо вообще много интересного. like you.

[@andrew2340]

👍👍👍🔥 - все по теме обсуждения. ничего лишнего. спасибо. изучаю цсс по твоим урокам.

[@annblok_webdev]

🔥🥳

[@pasha705]

Спасибо, стало больше ясности. В принципе все и так интуитивно понятно, но нужно было убедиться. Смотрел футеры на разных сайтах и встретил :before на wildberries, сам попробовал, и вроде как понятно

[@atastar9823]

Благодарю Вас, теперь всё понятно, а то не знал как подчёркивание у заголовка через псевдоэлемент делать 👍

[@xojayozov]

Боже мой , вот это урок ! Спасибо Анна и с праздником ! Удачи.

[@annblok_webdev]

Спасибо ☺️

[@BestProgramsXXICurrenLynn]

Спасибо. как всегда супер (как всегда), продолжайте в том же духе!

[@ЗапасЗнаний]

Контент, взрывающий мозг. Все отлично

[@Joynashy]

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

[@annblok_webdev]

Спасибо :)

[@Joynashy]

@@annblok_webdev вам спасибо за качественный урок)

[@sikinski1588]

Спасибо большое, голос приятный, все кратко и ясно! Вы умница.

[@DmitryYa89]

спасибо большое, не мог картинку поставить, оказывается надо высоту и ширину ставить

[@bcanary4252]

Аааа как приятно слушать этот голос, так и еще по поводу css 😍 Like

[@MrNagios]

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

[@p.polunin]

Очень лаконично! Спасибо!

[@progerlife6690]

Какой отморозок поставил дизлайк?? Все хорошо и ясным языком объясняет. Thank you! Лайк))))

[@AlibekKulseitov]

бэк эндер)

[@жительСпб-в4м]

@@AlibekKulseitov бэкэндеры заходят и не глядя ставят дизлайки)

[@maximzaika3753]

Огромное тебе спасибо, я только обучаюсь CSS и твой ролик мне очень помог) еще раз спасибо😘

[@taran_dm]

Инфо легко заходит. Спасибо за труд.

[@umjetnost4317]

Вы прекрасны, продолжайте !

[@ЕвгенийЩепало]

Это было КРУТО 😊

[@РусланРусалкин-х7ш]

Узнал что то новое, спасибо Аня :)

[@НиколайНиколаенко-ш5ф]

Очень познавательно и понятно!! Молодец, продолжай в том же духе))

[@hostyle]

Маркеры списков так же можно стилизовать, с помощью псевдоэлемента "::marker", но там есть некоторые ограничения. Например, свойства background-color, margin, border, padding не поддерживаются. В целом познавательно, спасибо.)

[@Vasya_Stone8oy]

Как всегда информативно и доступно. Благодарю)

[@road2zion2]

Спасибо! Очень помогла!

[@ПростоБро]

Какая крутая, просто жесть!!!!

[@goldlion1815]

у каждого свое мнение но факт остается фактом. ань. спасибо. поделилась полезнейшей информацией. а все остальное? а это как в рекламе nivea: добейся этого сам. для этого есть голова.

[@shurinskiy]

За стилизованный лист - спасибо :)

[@vardansafaryan2979]

Привет. Спасибо за инфу! продолжай в том же духе )))

[@dudli1763]

афигеть девушка программист, это так круто ) p.s. больше всего хотел что бы моя девушка была программистом

[@andreykarolik7455]

Простите, а есть у вас видео про выбор шрифтов на сайте? К примеру, смотрю, что вы любите тот же Montserrat, почему? И sans-serif запасной как системный? Можно чуть побольше про это? Спасибо.

[@BearVodkaAndValenki]

Псевдоэлементами являются ::after, ::before и ::selection (+ некоторые вендорные стили). Такие штуки как :hover, :active, :nth-child - это псевдоклассы. В CSS3 можно писать псевдоэлементы как через одно так и через 2 двоеточия, но корректным вариантом именно в CSS3 является написание через 2. 3:20 Если добавила position: absolute, то display: block уже не нужен: absolute по умолчанию придаёт формы блочного поведения (кроме заполнения элементом всей строки). Не затронут момент, что в content можно передать значение атрибута тега, вроде немаловажный пункт

[@egorbrodunov113]

Очень хорошо все рассказано, спасибо большое) Лайк + подписка

[@ЛевБухмиллер]

Спасибо, очень интересно и понятно, Ваше видео очень мне помогло)

[@СергейК-б6н]

Вообще топ 😎😎👍👍👍👍👍❤️

[@ИльяПопович-в1э]

А чем вы пользоваетесь для написания кода , что бы сразу рядом отображались изменения страницы?

[@annblok_webdev]

Codepen

[@ИльяПопович-в1э]

@@annblok_webdev спасибо большое 🤗🤗

[@ТаняДавиденко-ф4ъ]

Есть список из 4 рядков с разными стилями . Через :before я вставила галочку для каждого рядка. И эта каждая галочка приняла стили текста . Как сделать так , чтобы галочка не менялась. У вас слово Hello приняло стиль текста.

[@FlexXDXDXD]

Узнал как сделать так, чтобы линия не перечеркивала заголовок. Спасибо)

[@red53dhj5ry32rtty83e]

Спасибо, Солнышко =)

[@Monax-go6vq]

в css2 не использовалось двойное двоеточие (htmlbook.ru/css3/before). Это стандарт css3. В css2 - это только одно двоеточие. Для css3 - вполне приемлемо использование также старого способа (css2) с одинарным двоеточием

[@andreykarolik7455]

А можно чуть пояснить по position absolute и relative, этот нюанс не до конца понял. Когда и как надо, и как это работает именно в данном примере для обрамления h2. Спасибо.

[@paulgarrett7044]

Чтоб перемещать элемент с помощью top нужно назначить ему position absolute, а его родителю position relative. Иначе top работать не будет.

[@uncle-xxi]

Очешуенно!

[@dmitryleiko2869]

Привет, отличное видео, спасибо. Удачи.

[@appleipad4348]

Спасибо большое за видео!) Все очень понятно и коротко, это очень важно!)

[@John-du4wf]

ТВОЙ ВИДОС ТОП👍👍👍

[@Standoffer614]

Дима Лаврик , трепещи ! ) Это Она создавала CSS

[@JK2-b]

Здравствуйте! подскажите пожалуйста, можно ли найти псевдоэлемент ::before в поиске на странице? Если да, то какой верный синтаксис его добавления в селектор? Приведите пожалуйста пример.

[@АлександраМ-с3ь]

Добрый день. Я начинающий верстальщик. Столкнулась с проблемой отображения псевдоэлементов на разных экранах. Например, делаю обводку вокруг иконки соцсети, цепляя before к "a" (линку). Позиционирую пикселями: top: 20px, left: 15px. На другом мониторе обводка едет вбок, либо вверх. Есть подозрения, что это из-за разных разрешений. Как это предотвратить? Прописывать позиционирование в %?

[@MarinaJiguliova]

У меня вопрос насчет примера с лапкой (на пятой минуте), мне нужно эту лапку сделать больше кружочка, а бэкграундом это не получается. лапка внутри кружка. Есть какие-то варианты?

[@ruslan_klimchuk]

Что это за глаза, я от них оторватся не могу....

[@aleksandrkedria4024]

Фу. Каблук.

[@idariaexplorer]

Это называется Линзы, а не глаза :)

[@mattjak7834]

Таже херня, видео по два раза смотрю, первый на глаза залипаю, а во второй раз информацию впитываю)

[@Standoffer614]

Учи, сиди. На глаза он засмотрелся. ))

[@Joynashy]

Ты вродь пришёл урок смотреть)

[@mageitru7507]

Почему псевдоклассы не применяются к блоку section. При использовании after с bottom:0 position: absolute уходит вниз на середину следующего блока. Убираю bottom становится на середине.

[@СаняБ-к4ю]

глаза просто супер!

[@mishasv1490]

Видео просто бомба, молодец! P.S Куда делся розоватый оттенок волос?

[@annblok_webdev]

Cмылся :D

[@mishasv1490]

@@annblok_webdev Понял, тебе он был очень к лицу)

[@ИмяФамилия-э4ф7в]

@@annblok_webdev я думал стили слетели.

[@m-codedesigner5093]

Глаза космос)

[@melissasofie7681]

Очень круто объясняет. У неё талант.

[@technic_and_programming]

Ля, ты так хорошо объясняешь!!!

[@ganjackal]

Понятно 🤔 что ни чего не понятно! Объяснение и т.д норм спс но вот я так и не понял зачем псевдоэлементы нужны это нельзя сделать в css!? Второе есть видео что бы узнать все о них и понимать когда их вообще применять 😄 ссорян за мою тупость! Анна и еще вы пишите в. Браузере кажется в CodePen . Эта платформа специально для проверки кода и возможность его копирования потом в проект или как ?! Одним словом для чего он и как в нем работать ! Просто было как то время я что то у вас в нем что то проходил и вот решил еще раз заняться этим вопросом так как не отнёсся на тот момент к той задаче серьезно ! Подскажите есть ли видео о том как в нем работать !!! Спс

[@yevgeniy-eugene]

Автор зачет

[@virgo6324]

У меня пример с черной линией перед и после заголовка не получался. После долгих экспериментов понял в чем дело. Как только задаем правило position: absolute; для h2 , то сразу теряется смысл в top: calc(50% - 2px); для .box::befor . И Anna, не озвучив, поменяла его значение на 30px; На 8.24 это видно.

[@caezar47]

Пример с линией немного неудачный. Все можно сделать на flex'ах. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, labore? ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, labore? div{ display: flex; justify-content: center; align-items: center; &::before, &::after{ content:''; min-width: 50px; height: 4px; background: red; flex: 1 1 0; } &::before{ margin-right: 20px; } &::after{ margin-left: 20px; } } h1{ margin: 0; } 0) Flex сила, можно выравнивать так как нужно вам 1) Не приходится вырывать из потока текст 2) При слишком длинном заголовке текст переносится на следующую строку а линии остаются видны 3) Удобнее применят в боках со сложным фоном З.Ы. За видос спасибо, пили дальше

[@ильдарусманов-у4т]

А можно поставить линии по бокам не для заголовка, а для того что будет записано внутри content: " ";

[@АнтонБутенко-э2р]

Идеально объясняешь! Только вот скажи, зачем задавать по отдельности background? Т.е. background-image, background-size и т.д.

[@truedivan]

Чтобы легче воспринимали не такие профит как ты:)

[@esodrevolt2130]

Добрый день! Не получается "завести" линию за h2. После добавления заголовку position: absolute, заголовок "проваливается" за имеющийся ниже текст

[@annblok_webdev]

Добрый день. Скиньте ссылку на код в Codepen.

[@esodrevolt2130]

@@annblok_webdev codepen.io/kulikonch/pen/YzPWLgY

[@gevorgmovsisyan5153]

Тут нельзя лайк не поставить )

[@faluna2957]

Спасибо Вам за урок! Есть маленький вопрос: есть ли разница в наличии или отсутствии пробела между свойством и значением? Знаю что оба варианта рабочие, но все же...

[@annblok_webdev]

Разницы нет, но обычно, если делать минификацию CSS, то эти пробелы удаляются и стили устанавливаются в одну строчку (максимально сжатие). Поэтому на начальном этапе написания CSS вы можете просто выбрать любой удобный для вас способ отображения. Желательно, чтобы это использовалось везде, а не только в отдельных свойствах.

[@faluna2957]

@@annblok_webdev Спасибо за ответ!

[@alarm_yt]

Как думаешь, будет ли в этом году избыток front-end разработчиков и спрос на них спадет?

[@annblok_webdev]

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

[@alarm_yt]

@@annblok_webdev Насколько я знаю, фронтендеров больше, чем бэкендеров. Если я хочу стать бэк-разработчиком, как думаешь, будет ли эта сфера перспективной. Логика строгая без дизайна как-то больше меня привлекает.

[@annblok_webdev]

Anti/Lis бэкенд всегда перспективен

[@mischaelchicago3111]

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

[@xarkemali9231]

@@alarm_yt А что мешает с фронта перейти на бек? Nodejs, GraphQl, Apollo + на мобилку React native. Изучая чистый бек тебе все равно придется много работать с фронтом и JS. Изучай все сразу. На самом деле там не много и не особо сложно. После MVC php (laravel Yii и пр) React js or Vue или Node покажется весьма простым. По факту в работе над проектом в компании (аутсорс) лучше быть средним фулстаком, чем гуру бекэнд, без знания JS либ или фреймворков. На пайтоне не советую начинать. На джанго мало проектов, как и на JAva Spring или Ruby. CSS база. Совет изучай их вне зависимости от инструмента. Также базовый JS, особенно ES6 на котором построены все юзабельные Либы.

[@kostyapopkov8036]

Аня, пишу код за вами буква в букву, но все равно пример с линией не получается так как у вас(((( линия почему то сверху заголовка. Уже пробовал и в aVisual studio и в codepen - результат такой же... В чем может быть проблема? Код перепроверял 5 раз

[@Yulja13]

тоже самое было, обратите внимание, что потом для box::before значение top становится 30px, а не считается через калькулятор, жаль Аня не обьяснила этот момент

[@Cj_segr]

Ничего нового, я думал может там будет рассказываться про :before display:table; как у бутстрапа, принцип его работы...

[@sandusgoga9676]

Класс!!!

[@sergeystarkov8010]

Спасибо за урок! :) Не очень понимаю, почему в примере с декоративной линией нужно прописать "width: 100%" для псевдоэлемента, если у него есть свойство "display: block". Как я ранее понял, блочные элементы и так занимают всю ширину. При этом без "width" он совсем не отображается. Как это работает?

[@ильдарусманов-у4т]

Можно ли при помощи :before выводить надпись реклама над рекламным блоком?

[@annblok_webdev]

вы хотите кириллицу записать в свойства content? если да, то не рекомендую

[@sergeyvorobev69]

Отличное видео, благодараю!

[@skeelo3157]

У меня такая странная проблема, before не перекрывает цветом контент но перекрывает своими габаритами, то есть нельзя нажать на что то в контенте

[@olenashedenko8145]

Двойное двоеточие перед псевдоэлементами пришло из СSS2??? В CSS3 можно использовать любой вариант?? А гуру CSS пишут, что двойное двоеточние появилось в CSS3 специально для разграничения псевдоэлементов и псевдоклассов и что НУЖНО использовать двойное двоеточие. А одинарное используется только если нужна обратная совместимость. Так где же правда?

[@ГериАрнольд]

у меня небольшая проблема, когда я делаю ховер на бефор или афтер, то он меняет цвет при наведении на текст, а не сам элемент бефор или афтер

[@annblok_webdev]

Нужен ваш код)

[@ГериАрнольд]

@@annblok_webdev код был точно какой же как в видео у вас

[@lommmaster]

раз уж упомянули о after и before, не мешало бы упомянуть о переносе текста из атрибутов в content из html, может пригодиться. Об этом мало где говорят, и многие не знают. content: attr(data);

[@FamilyB-u4s]

так же что и то что не стоит злоупотреблять ими. с какими элементами он не работает и еще по мелочи(короче тема не раскрыта полностью)

[@romanshvayko211]

А Фронтенд разработка будет актуальна лет так через 5-8?

[@avenircaprioly1511]

что только на свете не бывает :)

[@evakuator8118]

Я знаю, что я ни бум-бум в английском, но все же, "маргин" и "ресёт"... Вы знаете толк в извращениях. А так отличный видос, спасибо

[@annblok_webdev]

Надеюсь, в скором времени я перестану их так произносить)) Действительно бывает проскальзывает неверное произношение, но я работаю над этим))

[@dollar70rubley]

@@annblok_webdev Мне без разницы, я иногда так коверкаю произношение, что мама не горюй, но зато все запоминается

[@sergey_shelestov]

Спасибо, шикарно🎓

[@владконоплёв-г1с]

Смотрю ваши видосы и думаю может самому такие видосы пилить?)

[@annblok_webdev]

влад коноплёв Пили

[@ДокторнаПриколе]

Спасибо, я в шоке

[@Fs-xj2gu]

Сними обзор на твои книги, какие у тебя есть

[@annblok_webdev]

всему свое время

[@Warox42]

Очень здорово. Мне понравилось. Кстати, Ваш сайт не доступен с територии Украины как минимум у провайдера "Интелект"

[@Standoffer614]

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

[@tatyanag3348]

А как сделать чтобы HOVER работал непосредственно при наведении на иконку, а не на весь текст?

[@annblok_webdev]

.element:hover:before или .element:hover:after

[@ДаниярБулдаков]

Как посмотреть модули уроков курса?

[@annblok_webdev]

Данияр Булдаков ☀ Базовый tpverstak.ru/training/ ☀ Продвинутый tpverstak.ru/training-profi/

[@КибицА]

:hover - это псевдо-класс, а не псевдо-элемент.

[@annblok_webdev]

Кибиц А точно, оговорилась :)

[@andreysorin3096]

а ::before, ::after - именно псевдоэлементы :) Но все эти мелочи вполне компенсируются личным обаянием

[@dinir1000]

@@andreysorin3096 и что то с глазами, линзы наверное) для магии))

[@SpawnProgram]

Пожалуйста, ставьте правильно ударения. Image - ударение на I! На первую букву.

[@Spencerrrr]

ПОРА УЖЕ НАЧАТЬ - КУРС ПО ВЁРСТКЕ ЛЕНДИНГА ‹От А ДО Я›

[@annblok_webdev]

sha mi есть такой