6.1 Content xassəsi
Psevdoelementlər ::before və ::after HTML kodunu dəyişdirmədən elementin məzmunundan əvvəl və sonra kontenti əlavə etməyə imkan verir. Onlar geniş şəkildə dekorativ məqsədlər üçün, istifadəçi interfeysini yaxşılaşdırmaq və daha interaktiv veb səhifələr yaratmaq üçün istifadə olunur.
Psevdoelementlər ::before və ::after nədir?
Psevdoelementlər ::before və ::after virtual elementlər yaradır, hansı ki, seçilmiş elementin məzmunundan əvvəl və sonra yerləşdirilir. Bu psevdoelementlər tez-tez ikonlar, dekorativ elementlər və ya digər vizual effektlər əlavə etmək üçün istifadə olunur.
before Sintaksisi:
selektor::before {
content: "mətn və ya digər dəyərlər";
/* stillər */
}
after Sintaksisi:
selektor::after {
content: "mətn və ya digər dəyərlər";
/* stillər */
}
Content xassəsi
Psevdoelementlər üçün əsas xassə ::before və ::after content xassəsidir. Bu xassə psevdoelementin məzmununu təyin edir. O, mətn sətiri, şəkil və ya yalnız vizual effekt üçün boş dəyər ola bilər.
Content xassəsinin mümkün dəyərləri:
- Mətn:
"mətn" - Şəkil:
url("path/to/image.png") - Boş dəyər:
"" - Atributlar:
attr(attributeName) - Kompensiyalar:
counter(name)
6.2 ::before və ::after istifadəsinə nümunələr
Dekorativ elementlərin əlavə olunması
Nümunə 1: Mətnin önünə ikon əlavə etmək
Bu nümunədə ::before psevdoelementi link mətninin önünə ikon əlavə etmək üçün istifadə olunur. margin-right ikon ilə mətn arasında boşluq yaradır:
/* Link mətninin önünə ikon əlavə etmək */
a::before {
content: "🔗";
margin-right: 5px;
}
Nümunə 2: Paraqrafdan sonra dekorativ element əlavə etmək
Bu nümunədə ::after psevdoelementi paraqrafdan sonra dekorativ element əlavə edir. display: block və text-align: right elementi sağ tərəfə hizalamaq üçün istifadə olunur:
/* Paraqrafdan sonra dekorativ element əlavə etmək */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Dekorativ çərçivələr və fonların yaradılması
Nümunə 3: Element ətrafında dekorativ çərçivə
Bu nümunədə ::before psevdoelementi div elementinin üstündə dekorativ xətt yaratmaq üçün istifadə olunur. position: absolute və top: -10px xətti elementin üstünə yerləşdirmək üçün istifadə olunur:
/* Element ətrafında dekorativ çərçivə */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Nümunə 4: Avtomatik qoşma işarələrinin əlavə olunması
Bu nümunədə ::before və ::after psevdoelementləri sitat blokunun ətrafına qoşma işarələri əlavə edir:
/* Sitat ətrafına avtomatik qoşma işarələri əlavə etmək */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Nümunə 5: Başlıqların nömrələnməsi
Bu nümunədə ::before psevdoelementi h2 başlığının önünə nömrə əlavə edir. counter-increment sayğacın dəyərini artırır, content: counter(section) isə sayğacın cari dəyərini daxil edir:
/* Başlıqların nömrələnməsi */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Psevdotəqlərin istifadəsi və stilləşdirilməsi
Psevdotəqlərin stilləşdirilməsi
Psevdotəqləri digər elementlər kimi stilləşdirmək olar. Onlar rəng, fon, çərçivələr, ölçülər və yerləşdirmə daxil olmaqla əksər CSS xassələrini dəstəkləyir.
Mürəkkəb şablonların yaradılması üçün psevdotəqlərin istifadəsi
Psevdotəqlər tez-tez şablonlarda dekorativ elementlərin, məsələn, çərçivələr, kölgələr və digər vizual effektlərin əlavə HTML elementlərinə ehtiyac olmadan yaradılması üçün istifadə olunur.
Nümunə: hər bir siyahı elementi mətndən əvvəl mavi göstərici ilə olacaq:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
6.4 Tam implementasiya nümunəsi
/* Link mətnindən əvvəl ikon əlavə etmək */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Parqrafın sonuna dekorativ element əlavə etmək */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Elementin ətrafına dekorativ çərçivə əlavə etmək */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Sitatın ətrafına avtomatik dırnaq əlavə etmək */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Başlıqları nömrələmək */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::before və ::after pseudo-elementləri nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">İkon ilə link</a>
<p>Mətndən sonra dekorativ element ilə paraqraf</p>
<div class="decorative-box">Dekorativ çərçivəli element</div>
<blockquote>Avtomatik dırnaqlı sitat</blockquote>
<h2>Nömrələnmiş başlıq</h2>
<h2>Başqa bir başlıq</h2>
</body>
</html>
GO TO FULL VERSION