PROG_WAY_BLOG Telegram 219
This media is not supported in your browser
VIEW IN TELEGRAM
Что такое псевдоэлементы

Псевдоэлементы — это специальные ключевые слова, которые используются для дополнительной стилизации страницы без изменения HTML.

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

div::before {
content: "До элемента";
}

div::after {
content: "После элемента";
}


У нас обязательно должно быть свойство content, а в остальном — можно использовать любые CSS правила.

Смотрите крутую статью на доке, там гораздо больше теории и других псевдоэлементов. А я рассмотрю интересный пример с прикрепленной гифки:

.btn::before {
background-color: #0A88F3;
transition: 0.3s ease-out;
}

.btn.hover-filled-slide-right::before {
top:0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
width: 0%;
}


Тут вся магия реализована как раз через ::before, и это, как я считаю, самый удобный и правильный способ реализовать подобное. Мы просто анимируем параметр width, постепенно приводя его из 100% в 0% на наведение курсора. Всё гениальное просто.

Накидайте бананов 🍌, если вам нравятся посты с гифками и примерами с кодпена. Может почаще делать буду такое.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — #web #theory #code
🍌53👍5🔥32🐳2



tgoop.com/prog_way_blog/219
Create:
Last Update:

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

Псевдоэлементы — это специальные ключевые слова, которые используются для дополнительной стилизации страницы без изменения HTML.

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

div::before {
content: "До элемента";
}

div::after {
content: "После элемента";
}


У нас обязательно должно быть свойство content, а в остальном — можно использовать любые CSS правила.

Смотрите крутую статью на доке, там гораздо больше теории и других псевдоэлементов. А я рассмотрю интересный пример с прикрепленной гифки:

.btn::before {
background-color: #0A88F3;
transition: 0.3s ease-out;
}

.btn.hover-filled-slide-right::before {
top:0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
width: 0%;
}


Тут вся магия реализована как раз через ::before, и это, как я считаю, самый удобный и правильный способ реализовать подобное. Мы просто анимируем параметр width, постепенно приводя его из 100% в 0% на наведение курсора. Всё гениальное просто.

Накидайте бананов 🍌, если вам нравятся посты с гифками и примерами с кодпена. Может почаще делать буду такое.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — #web #theory #code

BY progway — программирование, IT


Share with your friend now:
tgoop.com/prog_way_blog/219

View MORE
Open in Telegram


Telegram News

Date: |

Among the requests, the Brazilian electoral Court wanted to know if they could obtain data on the origins of malicious content posted on the platform. According to the TSE, this would enable the authorities to track false content and identify the user responsible for publishing it in the first place. Write your hashtags in the language of your target audience. Concise 5Telegram Channel avatar size/dimensions The channel also called on people to turn out for illegal assemblies and listed the things that participants should bring along with them, showing prior planning was in the works for riots. The messages also incited people to hurl toxic gas bombs at police and MTR stations, he added.
from us


Telegram progway — программирование, IT
FROM American