main-post-cover

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

    Digər
    Code-News
    09.03.2019
    Farid Pardashunas

    #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:


    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: "";
    }

    Linki kopyala

    Bənzər xəbərlər

    Oxşar xəbərlər