9.1 Pseudoelementlər ::before və ::after
::before və ::after pseudoelementləri CSS-də güclü alətlərdən biridir, bunlar HTML-i dəyişmədən elementlərin məzmunundan əvvəl və ya sonra dekorativ elementlər əlavə etməyə imkan verir. Vizual effektlər yaratmaq, istifadəçi interfeysini yaxşılaşdırmaq və elementlərə stillər əlavə etmək üçün geniş istifadə olunur.
Təsvir:
::before: elementin məzmunundan əvvəl əlavə olunan pseudoelement::after: elementin məzmunundan sonra əlavə olunan pseudoelement
Sintaksis:
element::before {
/* before pseudoelementi üçün stillər */
}
element::after {
/* after pseudoelementi üçün stillər */
}
Əsas xüsusiyyətlər
::before və ::after pseudoelementləri rəng, ölçü, mövqe, fon, kölgələr və s. daxil olmaqla demək olar ki, bütün CSS xüsusiyyətlərini daşıya bilər. Bununla belə, pseudoelementin görünməsi üçün ona məzmun və ölçü təyin etmək lazımdır.
content: pseudoelementin məzmununu təyin edir. Bu, mətn və ya şəkil ola bilər, həmçinin boş sətrdisplay: pseudoelementin nümayiş növünü təyin edir. Əksər hallardablockvə yainline-blockistifadə olunurposition: pseudoelementin mövqeyini idarə edir (məsələn,absolutevə yarelative)widthvəheight: pseudoelementin ölçülərini təyin edir
9.2 Mətnin əlavə edilməsi
content xüsusiyyəti ilə asanlıqla hər hansı elementə başlanğıcda və ya sonda mətn əlavə etmək mümkündür.
.example::before {
content: "Başlanğıc: ";
color: blue;
}
.example::after {
content: " :Son";
color: red;
}
<body>
<p class="example">Bu mətn nümunəsidir</p>
</body>
Kodun izahı:
.example::before: elementin məzmunundan əvvəl "Başlanğıc: " mətnini əlavə edir və onu mavi rəngə boyayır.example::after: elementin məzmunundan sonra " :Son" mətnini əlavə edir və onu qırmızı rəngə boyayır
9.3 Dekorativ Xətlər
Həmçinin, məzmunu əhatə edən dekorativ xətlər əlavə etmək olar:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Dekorativ xətləri olan mətn</div>
</body>
Kodun izahı:
.decorative-line::before: elementin məzmunundan əvvəl dekorativ xətt yaradır.decorative-line::after: elementin məzmunundan sonra dekorativ xətt yaradır
9.4 İkonların əlavə olunması
Mətn yetərli deyil? O zaman asanlıqla bir neçə ikon əlavə edə bilərsiniz:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">İkonlu mətn</p>
</body>
Kodun izahı:
.icon::before: URL vasitəsilə şəkil əlavə edərək mətnin qarşısında ikon yerləşdirir
9.5 Mürəkkəb dekorativ elementlər
Gəlin bir az daha mürəkkəb bir şey əlavə edək:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Dekorativ bucaq ilə element</div>
</body>
Kodun izahı:
.complex-decor::before: əsas məzmundan əvvəl dekorativ element yaradır, gradient və mütləq mövqeyləndirilmədən istifadə edir.complex-decor: pseudoelementin ona nisbətən mövqeyləndirilməsi üçün valideyn elementi üçün nisbi mövqeyləndirmə təyin edir
9.6 Animasiya istifadəsi
Hətta animasiya əlavə etmək olar:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Kodun izahı:
.animated::before: kvadrat pseudo-element yaradır və onun fırlanmasını açar kadrlarla animasiya edir
GO TO FULL VERSION