Automatic Numbering with ::before pseudo element + CSS counters

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 28

  • @LearnCodeBuild
    @LearnCodeBuild Год назад +1

    Very handy tips🎉

  • @web-atelier
    @web-atelier Год назад +1

    Thanks, your videos are excellents 👍

  • @Fred-ll4ce
    @Fred-ll4ce 4 месяца назад +1

    It is a really GREAT tutorial ! I directly copied in the Theme customizer (CSS style section) and it works like a charm. I am not even a beginner in CSS. One small bug: the h3 does not increment for the 1st section (it will show: 1.1 titleA, 1.1 titleB, 1.1 titleC) , it starts only incrementing from the 2nd section onwards. I don't know what should be changed...

  • @mehdimoradi603
    @mehdimoradi603 Год назад +1

    So useful, also your videos are great

  • @pedrocosta3818
    @pedrocosta3818 Год назад +1

    Great content! Super useful. And nice hat too!

  • @ArielBerloto
    @ArielBerloto Год назад +1

    Great tutorial Cracka, thanks.

  • @heinrichconnectedhealthtra7835
    @heinrichconnectedhealthtra7835 Год назад +1

    Very useful content content as always. Thank you very much Udoro.👍

    • @DesignwithCracka
      @DesignwithCracka  Год назад

      Glad to hear that!

    • @DesignwithCracka
      @DesignwithCracka  Год назад

      @@Jody-nf2bz view in HD. I do hope you aren’t viewing on mobile. But you could pinch zoom on mobile.

    • @Jody-nf2bz
      @Jody-nf2bz Год назад

      @@DesignwithCracka You were right! I looked at it with my laptop and it looks real good. Thanks a lot.

  • @YasienSarlie
    @YasienSarlie Год назад +1

    Thanks!

    • @DesignwithCracka
      @DesignwithCracka  Год назад +1

      Thank you! 🙏

    • @YasienSarlie
      @YasienSarlie Год назад

      @@DesignwithCracka using Zion now. I want to add another builder, apart, from Oxygen. What do you recommend between Bricks & Breakdancer?

    • @DesignwithCracka
      @DesignwithCracka  Год назад +1

      @@YasienSarlie it depends on why you need another builder. Since you’re already using Oxygen and Zion, I’d say try Breakdance, it’s different from the others. Check out my review on the latest release.

    • @YasienSarlie
      @YasienSarlie Год назад

      I do lots of woocommerce sites and finding these builders lacking and taking so long to improve the woocommerce features

  • @omedjamal7509
    @omedjamal7509 Год назад +1

    you deserve more than like and subscribe. good one Cracka.

  • @PswACC
    @PswACC Год назад +1

    Awesome! Thanks for sharing.

  • @YasienSarlie
    @YasienSarlie Год назад +1

    Brilliant tutorial!

  • @eucalyptech
    @eucalyptech Год назад +1

    Very useful tutorial, thank you Udoro ! Just a quick remark : there is a typo in your title 😉

  • @amwalonline
    @amwalonline 11 месяцев назад +1

    thanks

  • @Nima-Norouzi
    @Nima-Norouzi Год назад +1

    Thanks, very helpful. You might not believe it, but I was watching the same thing to implement it to one of my blocks. I watched some html css tutorials which explained this counter CSS, but I didn't have time to do it on my site. The only difference for me is I need to do it inside my loop block, for example I want to show the most popular or most commented articles or products in my sidebar, then I wanted to show the numbers from assume 1 to 10.
    I assume I can use this method for the loop as well? Right?
    I tried it inside my loop, but I can't work it out 🧐

    • @DesignwithCracka
      @DesignwithCracka  Год назад +1

      Okay just updating that we resolved this, in case anyone has an issue, remember to set the loop item to position relative if the ::before is set to absolute.

  • @thisweblabvideos
    @thisweblabvideos Год назад +1

    Nice tutorial, but I assume this is not a good appoach in case you care about accessibility? Or is the data-text available to screen readers as well?

    • @DesignwithCracka
      @DesignwithCracka  Год назад +2

      Screen readers read the CSS generated content in Chrome, Safari, and Microsoft Edge. Firefox is generally bad with screen readers, so If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.

    • @thisweblabvideos
      @thisweblabvideos Год назад +1

      @@DesignwithCracka Thanks, thats valuable info.