Təmiz CSS-da 8 faydalı imkan: 4) Custom bullet-lar

09.03.2019 0 PAYLAŞIM 198 OXUNMA

#Step IT Academy tərəfindən təqdim olunur  





    CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasına davam edirik.

Öncəki hissələr:

1) «Yapışqan» footer

2) İmage zoom on hover



4. Custom bullet-lar


    Siyahılarda bullet-ları məqsədə uyğun reallaşdırmaq üçün content ilə psevdoelement ::before işlətmək olar. 
    Aşağıdakı CSS-da fərqli bullet-lar üçün iki class: .complete və .incomplete istifadə olunub. 




Bonus: breadcrumps
    Content ilə çoxlu maraqlı həllər reallaşdırmaq olur. Bonus olaraq birini daha deyirik. 

    Slash və digər simvollar breadcrumps-da stilistik tərkib hissəsi olduğu üçün onları CSS-da təyin etmək daha məntiqli olar. Nümunədə CSS3-ün imkanlarından olan last-child istifadə olunub:
.breadcrumb a:first-child::before {
  content: " » ";
}
 
.breadcrumb a::after {
  content: " /";
}
 
.breadcrumb a:last-child::after {
  content: "";
}