jQuery ile ::before ve ::after gibi CSS pseudo-elementleri eklemek

Bu soru 1 kez yanıtlandı.

• bill gates

  27 Temmuz 2019 23:07

  19

  Problemi doğru anlıyorsam ::after için content eklemesi yapan bir css kuralı yazalım ve jquery'de hover eylemi sonucunda da bu pseudo-elementi modifiye edelim:

  HTML

  <h1 id="deneme">bu</h1>

  CSS

  #deneme:after {content: attr(data-content) ' denemedir';}

  JQUERY

  $('#deneme').hover(function(){
      $(this).attr('data-content',' bir');
  });

  Sonuç olarak sayfa ilk yüklendiğinde bu denemedir yazısı ekramda çıkar, "bu" kısmı html, " denemedir" kısmı ise css ile eklenmiştir. mouse imleci ile yazının üzerine gelindiğinde (hover) ise yazı "bu bir denemedir" olarak güncellenir ve aradaki " bir" bölümü de jquery ile eklenmiş olur.