CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11
HTML-код
- Опубликовано: 5 авг 2024
- CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11 CSS псевдоэлементы - это селекторы которые, помощью CSS, искусственно создают области в дереве документа. Грубо говоря добавляют к элементу новый элемент, либо выделяют часть содержимого элемента. Рассмотрим такие CSS псевдоэлементы как before, after, first-line и first-letter
🔴 Весь плейлист с уроками по HTML CSS JS верстке:
• БЕСПЛАТНЫЙ курс по вер...
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle
Или качай по ссылке: fls.guru/files/tutorials/css_...
Содержание:
0:00 - Подготовка к уроку
1:38 - Синтаксис записи псевдоэлементов
2:14 - first-line
3:25 - first-letter
4:37 - before
5:40 - after
9:10 - Специфические псевдоэлементы
12:07 - Комбинирование псевдоэлементов и псевдоклассов
13:08 - Домашка!
Спасибо Emil Chapchakchi
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
![Gunna - one of wun [Official Video]](http://i.ytimg.com/vi/w_JtBYqMgk8/mqdefault.jpg)
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
Ребята, надеюсь выпуск понравился!
Появилась возможность поодержать канал:
www.patreon.com/freelancerlifestyle
И еще пара полезных ссылок:
Чат по верстке: t.me/flschat
Instagram: instagram.com/freelancer.lifestyle
Telegram канал: t.me/freelancer_lifestyle
Facebook: facebook.com/freelancerlifestyle
Можешь свои стримы на канал заливать по вёрстке,а то я в график не вписываюсь,пожалуйста)
Когда добавляю стрелку в кнопку, после
.textbutton span:after{
могу ее сдвигать при помощи padding только по горизонтали.
Как сдвинуть по вертикали подскажите пожалуйста, 3 день не могу разобрать
@@user-be2pp5ln1f попробуй, display:inline-block
@@user-be2pp5ln1f попробуй возможно paddinng:bottom;
Як через before поставити пнг картинку в кнопку, я не можу цю стрілку поставити, я вказую розмір і так далі, але нічого не виходить
Жень, да как ты вообще можешь говорить "надеюсь, выпуск был полезен"??? Все твои видео просто на вес золота!!! Они просто не могут быть не полезными!!! Спасибо за твою работу!!!
Я рад! Пожалуйста!
Полностью согласен!!! Единственный канал который так затянул что без лени каждый день по 3-4 ролика смотрю, топовый разбор каждого момента, отличные домашки для закрепления, и просто лучшее объяснение!!!!!!!!!!!
Согласна на все 100%)
++++++
Дядя Ты с какой планеты родом??? С такой подачей инфы надо тебе занимать должность менистра образования! Коротко, по существу и наглядно. Просто красавчегггг!!!
Хех, спасибо!
@@user-jq2ud7to2k он казах
мЕнистры образования они такие, да...
@@user-zp4fo4zz4p угу...прям в точку
Наконец-то хоть кто-то понятно объяснил про before и after, спасибо, Жека!
Спасибо!
Не говори , столько искал подробной инфы на счёт бефор и афтер
Твой канал просто находка для начинающего верстальщика🙂!Хочу поблагодарить за
труд, который ты делаешь!!
Спасибо большое!
Привет, можешь сказать, как сейчас у тебя обстоят дела с веб-разработкой? Было бы интересно узнать
Привет. По поводу галочки, вот что получилось у меня.
1 вариант - скачать иконки двух цветов, и добавить зеленую в изначальный список с помощью before и свойства background image, но при этом указать еще внутренний левый отступ пикселей на 10-20 (смотря какая у вас по величине картинка, там можно играть, но паддинг добавить обязательно, иначе при обновлении браузера картинки не видно), а уже когда мы добавляем hover, то в background добавить вторую картинку с красной галочкой и поменять цвет текста на красный.
2 вариант - с помощью свойства content и добавления в него галочки из эмодзи (у меня вызывается клавишами windows + ' ; ' (ну или там где русская ж на клавиатуре, опять же это у меня так)).
Так вот, в эмодзи есть и галочка и стрелочки и разные другие символы, включая кавычки, которые легко вставляются в content и им можно менять цвет свойством color. Опять же в изначальном списке я указала зеленый, а при наведении - красный.
Единственный недостаток имеющихся эмодзи - это маленький выбор, там нет кучи вариантов стилей галочки или стрелки, но как вариант работает.
Может повторюсь но отдельное спасибо за обнуляющие стили.
Пожалуйста!
У меня прогресс на лицо. Раньше Ваш урок длительностью 15 минут я усваивала два часа. Данный урок я усвоила минут за 40. Спасибо. Вы очень талантливо делаете большое и нужное дело.
Хорошая подача материала, все отлично!) За инфу в формате блокнота👨🏽💻, огромное спасибо)))). Я когда учил, то сам все искал, а тут все в сжатом максимально удобном формате, очень крутая идея👍👍👍). 😊
Спасибо большое! Стараюсь!
НЕТ КОММЕНТАРИЕВ, СМОТРЮ УЖЕ 11 УРОК И МНЕ ЭТО НРАВИТЬСЯ! ты очень хорошо объясняешь! спасибо что ты захотел нас *бесплатно* обучить! лучший!
Приятно учиться! Появляется настоящая надежда стать Верстальщиком и работать на бирже заказов! Огромное спасибо Вам!!!
Спасибо! Рад что полезно!
Как успехи?
и как там дела с твоей мечтой?
@@musicalbox6069 плохо
Огромное спасибо! Первое видео про before и after в котором стало до конца понятно как они работают! 🔥
Спасибо за труд! Я просто поражаюсь сколько в этот канал вложено сил и денег! И всё ради людей! Ещё раз спасибо!!!
Это да! Пожалуйста!
о качестве уроков говорят дизлайки конкурентов. ну не может же нормальный человек этому видео поставить минус. а если считаете что сделал заслуженно - объяснить же надо за что минус.
Поддерживаю! :)
*Огромнейшее тебе спасибо! Благодаря твоим урокам шагаю семимильными шагами к созданию собственного сайта) А твой обнуляющий код - это просто вишенка на этом полезном торте из видеоуроков)*
Женя, спасибо огромное в сотый раз! Добра тебе и твоему дому, обнял!
Женя, больше спасибо за то, что ты делаешь! Я даже отказался от курсов, потому что у тебя все гораздо круче структурировано.
Спасибо за урок! Как всегда, супер! Интересно было бы посмотреть на Ваше решение домашки и сравнить со своим.
Жень, спасибо тебе огромное. Ты мне как отец, в любом случае выручишь.
Спасибо!
Это нечто! С каждым уроком у меня челюсть отвисает все больше). Спасибо!) Просто красавчик!
Огромная благодарность тебе Женя) Псевдо-классы и псевдо-элементы реально детально помогают изменять наполненность сайта
У меня была проблема как через псевдоелемент before сделать так чтобы галочка становилась красным. Решение оказалось банальным, нужно правильно писать последовательность псевдокласса и псевдоелемента. Делюсь вам для возможной проверки уже решенной домашки. P.S когда будете вставлять мой код, то чтобы стрелочка и галочка появились, не забудьте их выкачать - поместить в папку - и отредактировать в моем коде путь к этим иконкам и картинкам ( может кто не знает то это " url()" )
код html:
Стилизируй с помощью псевдоклассов и псевдоэлементов
Put on this page information about your product
A detailed description of your product
Tell us about the advantages and merits
Associate the page with the payment system
Full Story
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore fuga dicta neque, laudan
tium ratione nemo architecto tempora consequatur, officia corporis. Officia atque ex minima ac
cusantium eius ea excepturi incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore fuga dicta neque, laudan
tium ratione nemo architecto tempora consequatur, officia corporis. Officia atque ex minima ac
cusantium eius ea excepturi incidunt.
Код CSS:
/*Обнуление*/
*{
padding: 0;
margin: 0;
border: 0;
}
*,*:before,*:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
body{
background-color: @/e8e8e8;
width: 1440px;
height: 1700px;
}
.cummonbody {
padding: 125px 308px 103px 290px;
}
.checkicons_text {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 20px;
}
.check_title {
font-size: 14px;
color: @/000000;
line-height: 40px;
text-transform: uppercase;
letter-spacing: 2.8px;
}
.check_text li:nth-child(1){
color: @/273d46;
line-height: 36px;
text-align: left;
text-decoration: line-through;
}
.check_text li:nth-child(2){
color: @/273d46;
font-weight: bold;
line-height: 36px;
text-align: left;
}
.check_text li:nth-child(3){
color: @/273d46;
font-style: italic;
line-height: 36px;
text-align: left;
}
.check_text li:nth-child(4){
color: @/273d46;
line-height: 36px;
text-align: left;
text-transform: uppercase;
}
.check_text li:before{
content: url('../img/DZ/icons/check_icon.png');
padding: 0px 10px 0 0;
}
.check_text li:nth-child(1):hover{
color: @/273d46;
line-height: 36px;
text-decoration: none;
}
.check_text li:nth-child(2):hover{
color: @/d55a5a;
font-weight: 400;
}
.check_text li:nth-child(3):hover{
font-style: normal;
}
.check_text li:nth-child(4):hover{
text-transform: none;
}
.check_text li:nth-child(2):hover:before{
content: url('../img/DZ/icons/check_icon_red.png');
padding: 0px 10px 0 0;
}
.check_text{
margin-bottom: 137px;
}
.link_button{
border-radius: 24px;
display: inline-block;
height: 44px;
box-shadow: 0 6px 40px rgba(128, 183, 179, 0.54);
margin-bottom: 118px;
background-color: @/80b7b3;
}
.link-link {
display: inline-block;
padding:2px 35px 0 30px;
}
.link-link span:after{
content: url('../img/DZ/icons/strelca.svg');
position: relative;
left:9px;
top:2px;
}
.link-link span{
display: inline-block;
color: @/ffffff;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: 40px;
text-transform: uppercase;
letter-spacing: 2.8px;
}
.link_button:hover{
background-color: @/3a5856;
}
.link_button:active{
background-color: @/818181;
}
.text p:nth-child(1):first-line{
color: red;
}
.text p:nth-child(1){
margin-bottom: 43px;
}
.text p:nth-child(2):first-letter{
color: red;
font-size: 26px;
}
.text{
font-size: 18px;
}
Спасибо.)
Уточил, для себя, некоторые элементы.
Плюс Вам в карму, однозначно.))
Спасибо большущее! Что только не делала с этой галочкой)
подсмотрел как добавить списку через ::before галочки которые бэкграунд, оказалось положение и no-repeat после url() у меня были лишними а так все верно, спасибо за подсказку.
Этот метод уже не рабочий по ходу да
Зміг замінити на нову червону галочку. Але, здається, є спосіб змінити колір в коді CSS. Хтось знає як це зробити?
Женя, очень вас благодарю за прекрасные и понятные уроки
Просто лучший👏Я за 2 месяца обучения у других ютуберов,не узнал столько,сколько за 3 дня (10-11 видео) от тебя
Спасибо за видео! Для меня стало открытием, что псевдоэлементы можно с одним двоеточием писать. Респект! :)
🥰Просто нет слов!!! 😊Стараюсь посмотреть каждое видео, 🤗 некоторые пересматриваю😇 и первым делом смотрю поставил ли я лайк, 😅если нет, ставлю. И со спокойной душой продолжаю просмотр. 🤩 Спасибочки!!! Бесконечно БЛАГОДАРЕН Автору🤗🤗🤗
Как всегда всё только по теме, ничего лишнего! Спасибо!
Спасибо, старался)
Отличное объяснение псевдоэлеменов "before" и "after"! Очень доступно!
Невероятно! Как только у меня возникает вопрос прямо во время просмотра вашего видео, вы сразу же на него отвечаете. Просто магия! Спасибо! Жду с нетерпением 6 сентября 2021:)!
Нарадоваться не могу, что когда-то наткнулся на этот канал. Спасибо, Жека, за труды твои) отличная подача материала) Всех благ.
Дякую за ще один чудовий урок!
Прохожу урок за уроком и каждый раз очень рада что справляюсь.А это благодаря вашей технике подачи материала.Спасибо вам Евгений!!!
Спасибо огромное! Такая легкая подача материала - просто клад!
Спасибо за урок! Отлично, ка всегда! «Кавыкчкчки» alt+0171 alt+0187 на num-паде (alt надо держать).
Выпуск огонь!В общем как и всегда!
Спасибо!
После каждого урока прям ощущаешь плюс к суперсиле своего внутреннего верстальщика ))) Спасибо за тонкости, секреты мастерства и подачу-огонь!
Ещё один прекрасный урок! Спасибо, Женя! :)
Женя, спасибо тебе большое, во время обучения я как будто чувствую твоё присутствие, полное погружение и как будто индивидуально для меня все показываешь, изучение идет как по маслу и с улыбкой на лице
Супер! Именно этого я и хотел! 👍👍👍
Боже ты такой классный, ты даёшь информацию интересно, просто и запоминающе!
Спасибо!
Благодаря Жене я наконец нашел нужное для меня сочетание закрепления материала) учебники по HTML CSS JS и Женины уроки с выполнением домашек=профит)) Огромное спасибо тебе Евгений!) Ты лучший!
Женя, я уже 2 месяца с твоим курсом и это лучшие 2 месяца в моей жизни!
Спасибо Жека! За псевдо-элементы огромный тебе респект!!!
Спасибо! 🤟👍
Впервые смотрю такие полезные видосы про HTML и CSS с таким классным объяснением!!!
Спасибо! Я рад что полезно!
Лучший... нет, ну, честно - это лучшие уроки на ютубе, что я находил. Начинал учиться раза 4 и всякий раз словно головой кирпичную стену пытался пробить. В последний раз не мог разобраться с SASS и нашел твоё видео на эту тему. Правда, тогда в очередной раз забросил, но на этот раз решил сразу начать с твоих уроков. Самое лучшее, что ты не просто говоришь, что делать, но и объясняешь, как оно работает. Я наконец-то начал по-настоящему всё понимать. Искренне и от души спасибо!
Спасибо Жень за очередной классный урок! Отдельное спасибо за обнуляющий список CSS!
Ничто не сияет ярче чем твои уроки )) спасибо Женя
Спасибо за уроки! Огромное человеческое СПАСИБО!
Пожалуйста!
Большое спасибо за твой труд) Лучший преподаватель и человек с широкой душой.
Женя,спасибо огромное за уроки!!!МЕГА крутая подача!Успехов во всем!!!
Огромная огромная огромная благодарность за видео!!!!!!!!!!!
Пожалуйста!
Действительно Евгений!!!, со своим видео-обучающим каналом, находка для начинающего верстальщика. Будь здоров и
Спасибо!
Супер -понятно, ничего лишнего, учусь с удовольствием!
Я наверное под каждым уроком буду писать спасибо, особенно за краткие конспекты!!!! Это просто находка, забыл что-то открыл и посмотрел, не надо видео пересматривать и искать нужное место!
Жека, ты красава. С таким преподом и подачей информации у меня есть все шансы добиться успеха. Спасибо за контент.
Пожалуйста!
Смотрю с большим интересом)) спасибо!
Спасибо!
Очень интересная тема эти псевдоэлементы!
Вообще крутой курс, даже лучше чем некоторые платные.
Один из лучших каналов про верстку. Автор всегда доступно расставит все по полочкам.
Спасибо за видео уроки, отличная подача материала и очень вариативная.
Пожалуйста!
Спасибо тебе!) Благодаря тебе учеба стала легче и приятней, а за ДЗ отдельное Спасибо)
Пожалуйста!
И таки, начало кое-что ПОЛУЧАТЬСЯ! Объясняете Вы потрясающе!!! Очень здорово! А раньше - я даже не смотрела в эту сторону, считая, что программирование для меня "недоступно"... Да это, оказывается так ЗДОРОВО и ИНТЕРЕСНО!!!🌈
Спасибо большое за вашу работу! Одно удовольствие обучаться по данным урокам!
Жека! Спасибо наконец-то ты единственный Препод, который рил объясняет все тонкости! И наконец-то я понял про "before and after". Thank, you! I wait to your videos!
Супер! Спасибо! 🤘
*wait for
:)
@@gen6885 А еще лучше I'm waiting for your videos!
Учу html и css, тут хорошо объясняют да ещё и домашка есть) спасибо что стараешься;)
Пожалуйста!
Как всегда отлично. Как благодарность, я всегда смотрю вашу рекламу без пропусков)
Обнуляющий стиль бесценен, как и весь контент от Евгения!!!!
Все видео очень нравятся. Спасибо огромное ! :)
Спасибо большое, рад что прлезно!
Спасибо за видео Жень))Все супер, все понятно, класс👍😊😊
Спасибо! Стараюсь)
Величезне!!! Велиииичееееезнееее дякуюююю тобі за обнулюючий список!
Насправді, це величезний подарунок!
Дякую за твої уроки, вони всі корисні, а головне зрозумілі та зроблені з душею.
Урок бомбезный!)
Спасибо! 🤘
Передивила багато контенту, аби зрозуміти для чого ж потрібні псевдоелементи. Лише Женя зміг пояснити все зрозумілою мовою, і тепер я можу рухатися далі. Дякую) Це дійсно крутяк)
Дякую! Це надихає!
Материал огонь. Сначала не очень зашло, много информации. Но на практике стало все на свои места) СПАСИБО!!!
Слушая Вас, понимаешь о чём говорите и при этом нет напрягов, а просто отдых. смотрю-понимаю-делаю 3 минуты перерыва, чтобы улеглось в памяти, потом!!! словами не описать
какая благодать от Вас нам, желающих учиться
Жека, моё почтение! У тебя дар доносить до мозга не доносимое другими. Умеешь объяснить, рассказать, научить. Нельзя не поставить лайк! Жека, смотрю, изучаю, внедряю)
Спасибо! Стараюсь) Рад что полезно!
:hover: before впечатлило, спасибо за урок и Ваши советы.
Пожалуйста!
Как всегда все четко! Пушка! Бомба! Класс!
Подписка, лайк, комментарий! Евгений, снимайте ещё и ещё и ещё. Спасибо Вам, за Ваш труд.
Жека, ты лучший! Реально самый крутой курс из тех, что смотрел. Отличная подача материала, никакой лишней болтовни и заумных фраз, все четко и по делу. При этом все сразу становится понятно + тут же домашка для закрепления материала. Спасибо и успехов тебе!
Спасибо! Я рад!
Твои уроки божественны ! :)
Спасибо!
Спасибо за крутые уроки, ваш канал бесценная находка на youtube!
Очень классная подача материала в каждом видео! Супер!!!
Видео обязательно вечером посмотрю. Но хочу напомнить про две более лайтовые темы: правильное обозначение классов и подключение шрифтов к проекту. Было бы интересно посмотреть и понять как это делается, а то в инете куча ненужной инфы идет рядом и суть теряется. А ты всегда по делу говоришь! Так что спасибо за это видео, и ждем следующие по темам!)
Спасибо! Эти темы уже запланированы!
«Замечательный браузер:
Интернет Эксплорэр»😁👍
Тож улыбнуло))
Explorer(с англ.)- исследователь
Enternet(с англ.)- Интернет
Исследователь интернета получается!
Огромное тебе спасибо за то что ты делишься знаниями накопленными годами и делаешь это без возмездно. Твой канал лучший на RUclips для верстальщика многие платные курсы дают уровень знаний сильно хуже. Недостаточно хорошо знать программирования нужно уметь подавать информацию нужно быть учителем у тебя это прекрасно получается спасибо за твой канал
Дуже дякую за вашу працю і за хорошу подачу матеріалу. Люблю дивитися ваші відео. Сподіваюся стати схожим на вас. Дякую, що ділитеся своїм досвідом з людьми.ВЕЛИКЕ СПАСИБІ!!!
оказывается before и after вообще несложные, благодаря объяснениям Жеки все просто и понятно :) как всегда восхищена!
Я рад что понятно)
Спасибо Женя! За 14 минут доступно объяснил эту тему, которая мне за несколько часов самостоятельного штудирования не зашла.
Супер! Я рад!
Женя, я в восхищении! Я немного знакома с версткой, но все равно смотрю сейчас уроки с самого начала на случай новой информации. В каждом уроке такое находится, но на ms-clear и moz-focuz я просто запищала от восторга. Не столько даже с них, столько с того, что вам реально не жалко делиться такими вот локальными лайфхаками на этапе, казалось бы, для совсем начинающих. Сразу видно, как вас самого с этого прет и что вы действительно хотите научить полезному, а не плодить дураков, лишь бы платили)). Это супер, это большая редкость.
Спасибо за выпуск. Учится по этому курсу одно удовольствие
Как всегда круто!
Спасибо!
Спасибо. Огромное спасибо! Каждый урок - восторг, конкретика, понимание и море полезности. Вы фантастичны!!!
Недавно доделал домашку из 9 урока и теперь дополняю ее с учетом новых уроков. Автору огромный респект за труды.
Евгений, благодарю Вас за такую бескорыстную подачу материала , очень объемно и исчерпывающе , мне 37 и я без труда все понимаю, но вы дали более короткую дорогу в Iti сферу которую я откладывал всю жизнь .В этот праздник желаю Вам благополучия и процветания, я каждый день учусь с Вами и благодарен тому что вы есть на просторах интернета.
Объясняешь максимально понятно)
Спасибо, стараюсь!
Дальше все интересней! Спасибо)
Это точно! 👍
Окрема подяка за обнулення! Це реальна крута фішка!
Сразу ставлю лайк, потому что все видео на канале очень полезные! Спасибо!
Ты просто красава) столько сил вложил в канал, сейчас изучаю все это и понимаю что для бесплатного курса это просто шикарно, благодарю тебя.
Результат бар ма?
Я тоже изучаю сейчас
пушечка как всегда , спасибо!
Пожалуйста!
Большое спасибо за эти отличные уроки!)) Материал и подача супер!)) Всех благ!