CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 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
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 3](http://i.ytimg.com/vi/A1XXYbV048k/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. Спасибо. Вы очень талантливо делаете большое и нужное дело.
Хорошая подача материала, все отлично!) За инфу в формате блокнота👨🏽💻, огромное спасибо)))). Я когда учил, то сам все искал, а тут все в сжатом максимально удобном формате, очень крутая идея👍👍👍). 😊
Спасибо большое! Стараюсь!
Приятно учиться! Появляется настоящая надежда стать Верстальщиком и работать на бирже заказов! Огромное спасибо Вам!!!
Спасибо! Рад что полезно!
Как успехи?
и как там дела с твоей мечтой?
@@musicalbox6069 плохо
НЕТ КОММЕНТАРИЕВ, СМОТРЮ УЖЕ 11 УРОК И МНЕ ЭТО НРАВИТЬСЯ! ты очень хорошо объясняешь! спасибо что ты захотел нас *бесплатно* обучить! лучший!
Спасибо за труд! Я просто поражаюсь сколько в этот канал вложено сил и денег! И всё ради людей! Ещё раз спасибо!!!
Это да! Пожалуйста!
о качестве уроков говорят дизлайки конкурентов. ну не может же нормальный человек этому видео поставить минус. а если считаете что сделал заслуженно - объяснить же надо за что минус.
Поддерживаю! :)
Женя, очень вас благодарю за прекрасные и понятные уроки
Выпуск огонь!В общем как и всегда!
Спасибо!
Впервые вижу обнуляющий список:
"Что за мать его абракадабра"
С каждым последующим уроком:
"Ого, какая же всё таки нереально крутая штука!"
Уроки огонь, безмерная благодарность!
Спасибо за выпуск. Учится по этому курсу одно удовольствие
Жень, спасибо тебе огромное. Ты мне как отец, в любом случае выручишь.
Спасибо!
Спасибо за урок! Как всегда, супер! Интересно было бы посмотреть на Ваше решение домашки и сравнить со своим.
Ещё один прекрасный урок! Спасибо, Женя! :)
First-line прям порадовал.
Спасибо!!!
*Огромнейшее тебе спасибо! Благодаря твоим урокам шагаю семимильными шагами к созданию собственного сайта) А твой обнуляющий код - это просто вишенка на этом полезном торте из видеоуроков)*
Спасибо Жека! За псевдо-элементы огромный тебе респект!!!
Спасибо! 🤟👍
Спасибо Жень за очередной классный урок! Отдельное спасибо за обнуляющий список CSS!
Как всегда все четко! Пушка! Бомба! Класс!
Смотрю с большим интересом)) спасибо!
Спасибо!
Как всегда всё только по теме, ничего лишнего! Спасибо!
Спасибо, старался)
Женя, я уже 2 месяца с твоим курсом и это лучшие 2 месяца в моей жизни!
Огромное спасибо! Первое видео про before и after в котором стало до конца понятно как они работают! 🔥
Спасибо за уроки! Огромное человеческое СПАСИБО!
Пожалуйста!
«Замечательный браузер:
Интернет Эксплорэр»😁👍
Тож улыбнуло))
Explorer(с англ.)- исследователь
Enternet(с англ.)- Интернет
Исследователь интернета получается!
Очень грамотная подача информации!! Спасибо!)
Спасибо большое за вашу работу! Одно удовольствие обучаться по данным урокам!
Дякую за ще один чудовий урок!
Боже ты такой классный, ты даёшь информацию интересно, просто и запоминающе!
Спасибо!
Отличное объяснение псевдоэлеменов "before" и "after"! Очень доступно!
Спасибо огромное! Такая легкая подача материала - просто клад!
Женя, спасибо тебе большое, во время обучения я как будто чувствую твоё присутствие, полное погружение и как будто индивидуально для меня все показываешь, изучение идет как по маслу и с улыбкой на лице
Супер! Именно этого я и хотел! 👍👍👍
Впервые смотрю такие полезные видосы про HTML и CSS с таким классным объяснением!!!
Спасибо! Я рад что полезно!
Женя, спасибо за твой труд, это очень круто!
Спасибо за понятные примеры!) Очень полезно🤗
Жека! Спасибо наконец-то ты единственный Препод, который рил объясняет все тонкости! И наконец-то я понял про "before and after". Thank, you! I wait to your videos!
Супер! Спасибо! 🤘
*wait for
:)
@@gen6885 А еще лучше I'm waiting for your videos!
Огромная огромная огромная благодарность за видео!!!!!!!!!!!
Пожалуйста!
Супер -понятно, ничего лишнего, учусь с удовольствием!
Спасибо за материал! Всё по делу и без воды!
Спасибо за видео уроки, отличная подача материала и очень вариативная.
Пожалуйста!
Все видео очень нравятся. Спасибо огромное ! :)
Спасибо большое, рад что прлезно!
Женя, больше спасибо за то, что ты делаешь! Я даже отказался от курсов, потому что у тебя все гораздо круче структурировано.
Очень классная подача материала в каждом видео! Супер!!!
Урок бомбезный!)
Спасибо! 🤘
🥰Просто нет слов!!! 😊Стараюсь посмотреть каждое видео, 🤗 некоторые пересматриваю😇 и первым делом смотрю поставил ли я лайк, 😅если нет, ставлю. И со спокойной душой продолжаю просмотр. 🤩 Спасибочки!!! Бесконечно БЛАГОДАРЕН Автору🤗🤗🤗
Всё супер. Отличный выпуск, спасибо
Женя, спасибо огромное в сотый раз! Добра тебе и твоему дому, обнял!
Жека, моё почтение! У тебя дар доносить до мозга не доносимое другими. Умеешь объяснить, рассказать, научить. Нельзя не поставить лайк! Жека, смотрю, изучаю, внедряю)
Спасибо! Стараюсь) Рад что полезно!
Спасибо тебе!) Благодаря тебе учеба стала легче и приятней, а за ДЗ отдельное Спасибо)
Пожалуйста!
Ты потрясающий! Спасибо огромное!!!
Спасибо за видео! Для меня стало открытием, что псевдоэлементы можно с одним двоеточием писать. Респект! :)
Жека, ты красава. С таким преподом и подачей информации у меня есть все шансы добиться успеха. Спасибо за контент.
Пожалуйста!
Объясняешь максимально понятно)
Спасибо, стараюсь!
Просто класс! За кавычки отдельное спасибо!)
Женя,спасибо огромное за уроки!!!МЕГА крутая подача!Успехов во всем!!!
Спасибо за видео Жень))Все супер, все понятно, класс👍😊😊
Спасибо! Стараюсь)
Как всегда круто!
Спасибо!
Нет слов, огромная благодарность!
Огромное спасибо за уроки!
Дальше все интересней! Спасибо)
Это точно! 👍
:hover: before впечатлило, спасибо за урок и Ваши советы.
Пожалуйста!
Как всегда четко,ясно и понятно!!!
Большое спасибо! Выпуск был очень полезен и доступно преподан!
Ты просто красава) столько сил вложил в канал, сейчас изучаю все это и понимаю что для бесплатного курса это просто шикарно, благодарю тебя.
Результат бар ма?
Я тоже изучаю сейчас
Твои уроки божественны ! :)
Спасибо!
Большое спасибо за твой труд) Лучший преподаватель и человек с широкой душой.
Это нечто! С каждым уроком у меня челюсть отвисает все больше). Спасибо!) Просто красавчик!
Действительно Евгений!!!, со своим видео-обучающим каналом, находка для начинающего верстальщика. Будь здоров и
Спасибо!
Нарадоваться не могу, что когда-то наткнулся на этот канал. Спасибо, Жека, за труды твои) отличная подача материала) Всех благ.
Прохожу урок за уроком и каждый раз очень рада что справляюсь.А это благодаря вашей технике подачи материала.Спасибо вам Евгений!!!
Огонь!!! рекомендую всем
Учу html и css, тут хорошо объясняют да ещё и домашка есть) спасибо что стараешься;)
Пожалуйста!
Спасибо за урок! Отлично, ка всегда! «Кавыкчкчки» alt+0171 alt+0187 на num-паде (alt надо держать).
Спасибо, все как всегда на высшем уровне!!!
Подписка, лайк, комментарий! Евгений, снимайте ещё и ещё и ещё. Спасибо Вам, за Ваш труд.
пушечка как всегда , спасибо!
Пожалуйста!
Большое спасибо за эти отличные уроки!)) Материал и подача супер!)) Всех благ!
Огромная благодарность тебе Женя) Псевдо-классы и псевдо-элементы реально детально помогают изменять наполненность сайта
Спасибо Женя! За 14 минут доступно объяснил эту тему, которая мне за несколько часов самостоятельного штудирования не зашла.
Супер! Я рад!
У меня была проблема как через псевдоелемент 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 вообще несложные, благодаря объяснениям Жеки все просто и понятно :) как всегда восхищена!
Я рад что понятно)
Передивила багато контенту, аби зрозуміти для чого ж потрібні псевдоелементи. Лише Женя зміг пояснити все зрозумілою мовою, і тепер я можу рухатися далі. Дякую) Це дійсно крутяк)
Дякую! Це надихає!
Очень круто! Спасибо огромное за замечательный и полезный труд
Спасибо! Очень интересный, полезный урок
Огромное вам спасибо ❤️
Пожалуйста! ☺
Видео обязательно вечером посмотрю. Но хочу напомнить про две более лайтовые темы: правильное обозначение классов и подключение шрифтов к проекту. Было бы интересно посмотреть и понять как это делается, а то в инете куча ненужной инфы идет рядом и суть теряется. А ты всегда по делу говоришь! Так что спасибо за это видео, и ждем следующие по темам!)
Спасибо! Эти темы уже запланированы!
Очень интересный ролик, супер полезная информация!! Женя, спасибо Вам за труд!!! ❤️❤️❤️
После каждого урока прям ощущаешь плюс к суперсиле своего внутреннего верстальщика ))) Спасибо за тонкости, секреты мастерства и подачу-огонь!
Классный материал!!!
Спасибо! 🤟
Ничто не сияет ярче чем твои уроки )) спасибо Женя
Спасибо за урок!!!Едем дальше
Спасибо за урок, Женя!
Пожалуйста!