javascript - w3schools - تحديد ومعالجة عناصر زائفة CSS مثل:: before و:: after jQuery




top bar html css (13)

هل هناك أي طريقة لتحديد / معالجة عناصر CSS شبه زائفة مثل ::before و ::after (والإصدار القديم مع منقوطة واحدة) باستخدام jQuery؟

على سبيل المثال ، تحتوي صفحة الأنماط الخاصة بي على القاعدة التالية:

.span::after{ content:'foo' }

كيف يمكنني تغيير "foo" إلى "bar" باستخدام jQuery؟


إذا كنت تريد التعامل مع :: before أو :: after sudo elements بالكامل من خلال CSS ، فيمكنك القيام بذلك JS. انظر أدناه؛

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

لاحظ كيف يحتوي عنصر <style> على معرّف ، والذي يمكنك استخدامه لإزالته وإلحاقه مرة أخرى إذا كان نمطك يتغير ديناميكيًا.

بهذه الطريقة ، يكون العنصر الخاص بك هو النمط الذي تريده بالضبط من خلال CSS ، بمساعدة JS.


إليك طريقة الوصول: بعد و: قبل خصائص النمط ، المعرّفة في css:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

طريقة واحدة تعمل ولكن ليست فعالة للغاية هي إضافة قاعدة إلى المستند بالمحتوى الجديد والإشارة إليه مع فصل دراسي. اعتمادًا على ما هو مطلوب ، قد يحتاج الفصل إلى معرف فريد لكل قيمة في المحتوى.

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');

على الرغم من أن المتصفحات يتم عرضها من خلال CSS كما لو كانت مثل عناصر DOM حقيقية أخرى ، إلا أن العناصر الزائفة نفسها ليست جزءًا من DOM ، لأن العناصر الزائفة ، كما يوحي الاسم ، ليست عناصر حقيقية ، وبالتالي لا يمكنك تحديدها ومعالجتها مباشرة باستخدام jQuery (أو أي واجهات برمجة تطبيقات جافا سكريبت لهذه المسألة ، ولا حتى واجهة Selectors API ). ينطبق هذا على أي عناصر زائفة تحاول الأنماط تعديلها باستخدام برنامج نصي ، وليس فقط ::before و ::after .

يمكنك فقط الوصول إلى أنماط عناصر زائفة مباشرة في وقت التشغيل من خلال CSSOM (think window.getComputedStyle() ) ، التي لا يتم عرضها بواسطة jQuery ما بعد .css() ، وهي طريقة لا تدعم عناصر زائفة أيضًا.

يمكنك دائمًا العثور على طرق أخرى حوله ، على سبيل المثال ، على سبيل المثال:

  • تطبيق الأنماط على العناصر الزائفة لواحد أو أكثر من الفئات العشوائية ، ثم التبديل بين الطبقات باستخدام jQuery (انظر إجابة seucolega لمثال سريع) - هذه هي الطريقة الاصطلاحية حيث أنها تستخدم محددات بسيطة (والتي لا تكون عناصر زائفة ) للتمييز بين العناصر وحالات العناصر ، والطريقة التي يُراد بها استخدامها

  • معالجة الأنماط التي يتم تطبيقها على العناصر الزائفة المذكورة ، عن طريق تغيير ورقة أنماط المستند ، والتي تعد أكثر بكثير من الاختراق


في خط ما يقترحه المسيحي ، يمكنك أيضًا القيام بما يلي:

$('head').append("<style>.span::after{ content:'bar' }</style>");

كنت أعتقد أن هذا سيكون سؤال بسيط للإجابة ، مع كل شيء آخر يمكن أن تفعله jQuery. للأسف ، تنبع المشكلة من مشكلة فنية: css: after and: before rules are not part of the DOM ، وبالتالي لا يمكن تعديلها باستخدام طرق DOM jQuery.

هناك طرق للتعامل مع هذه العناصر باستخدام حلول جافا سكريبت و / أو CSS ؛ يعتمد عليك أي منها على متطلباتك الدقيقة.

سأبدأ مع ما يعتبر منهج "الأفضل" على نطاق واسع:

1) إضافة / إزالة فئة محددة سلفا

في هذا الأسلوب ، تكون قد قمت بالفعل بإنشاء فئة في CSS باستخدام مختلفة :after أو :before النمط. ضع هذه الفئة "الجديدة" لاحقًا في ورقة الأنماط الخاصة بك للتأكد من تجاوزها:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

بعد ذلك يمكنك بسهولة إضافة أو إزالة هذا الفصل باستخدام jQuery (أو جافا سكريبت الفانيلا):

$('p').on('click', function() {
    $(this).toggleClass('special');
});

    $('p').on('click', function() {
      $(this).toggleClass('special');
    });
p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
p.special:before {
  content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

  • الايجابيات: سهل التنفيذ مع jQuery؛ يغير بسرعة أنماط متعددة في وقت واحد ؛ يفصل بين المخاوف (عزل CSS و JS من HTML)
  • السلبيات: يجب أن تكون CSS مكتوبة مسبقًا ، لذا فإن محتوى :before أو :after ليس ديناميكيًا تمامًا

2) أضف أنماطًا جديدة مباشرةً إلى ورقة أنماط المستند

من الممكن استخدام JavaScript لإضافة أنماط مباشرةً إلى ورقة أنماط المستند ، بما في ذلك :after و :before styles. لا توفر jQuery اختصارًا مناسبًا ، ولكن من حسن الحظ أن JS ليس معقدًا:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
  content: "foo";
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

.addRule() وطرق .addRule() ذات الصلة .insertRule() بشكل جيد اليوم.

كتنوع ، يمكنك أيضًا استخدام jQuery لإضافة ورقة أنماط جديدة تمامًا إلى المستند ، ولكن الشفرة الضرورية ليست أي منظف:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
  content: "foo";
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

إذا كنا نتحدث عن "التلاعب" بالقيم ، وليس فقط إضافتها ، يمكننا أيضًا قراءة ما هو موجود :after أو :before استخدام الأساليب بنهج مختلف:

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
    content:"foo";
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

يمكننا استبدال document.querySelector('p') بـ $('p')[0] عند استخدام jQuery ، للحصول على رمز أقصر قليلاً.

  • الايجابيات: يمكن إدخال أي سلسلة بشكل ديناميكي في النمط
  • سلبيات: لا يتم تغيير الأنماط الأصلية ، وتجاوزت فقط ؛ يمكن أن يؤدي استخدام (ab) المتكرر إلى زيادة نمو DOM بشكل كبير

3) تغيير سمة DOM مختلفة

يمكنك أيضًا استخدام attr() في CSS لقراءة سمة DOM معينة. ( إذا كان المستعرض يدعم :before ، فإنه يدعم attr() كذلك. ) من خلال دمج هذا مع content: في بعض CSS المُعد بعناية ، يمكننا تغيير المحتوى ( وليس الخصائص الأخرى ، مثل الهامش أو اللون) لـ :before من :before و :after ديناميكيًا:

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});
p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

يمكن دمج هذا مع التقنية الثانية إذا تعذر إعداد CSS في وقت مبكر:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

$('p').on('click', function() {
  $(this).attr('data-before', str);
});
p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

  • الايجابيات: لا يخلق أساليب إضافية لا نهاية لها
  • العيوب: لا يمكن تطبيق attr في CSS إلا على سلاسل المحتوى ، وليس على عناوين URL أو ألوان RGB

لقد أجبت على هذا السؤال here بالفعل ، ولكن لأكون رائعًا سأكرر نفسي نيابة عنك.

الجواب يجب أن يكون نعم ولا . لا يمكنك تحديد عنصر عبر pseudo-selector ، ولكن يمكنك إضافة قاعدة جديدة إلى ورقة الأنماط باستخدام javascript.

لقد صنعت شيئًا يناسبك:

var addRule = function(sheet, selector, styles) {
    if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
    if (sheet.addRule) return sheet.addRule(selector, styles);
};

addRule(document.styleSheets[0], "body:after", "content: 'foo'");

http://fiddle.jshell.net/MDyxg/1/


لماذا تضيف فئات أو سمات عندما يمكنك فقط إضافة style للرأس

$('head').append('<style>.span:after{ content:'changed content' }</style>')

هنا هو HTML:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

كان النمط المحسوب على "قبل" هو content: "VERIFY TO WATCH";

في ما يلي سطري من jQuery ، اللذان يستخدمان فكرة إضافة فئة إضافية للإشارة إلى هذا العنصر تحديدًا ثم إلحاق علامة نمط (بعلامة مهمة!) لتغيير CSS لقيمة محتوى sudo-element:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");


هناك العديد من الإجابات هنا ، لكن لا توجد إجابة تساعد على التعامل مع css :before أو :after ، ولا حتى المقبولة.

هنا كيف أقترح القيام بذلك. لنفترض أن HTML الخاص بك هو مثل هذا:

<div id="something">Test</div>

ومن ثم تقوم بإعداد: قبل ذلك في CSS وتصميمه مثل:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

يرجى ملاحظة أنني قمت أيضًا بتعيين سمة content في العنصر نفسه بحيث يمكنك إزالتها لاحقًا بسهولة. الآن هناك button نقر عليه ، تريد تغيير لون: من قبل إلى اللون الأخضر وحجم الخط إلى 30 بكسل. يمكنك تحقيق ذلك على النحو التالي:

قم بتعريف css بالنمط المطلوب في بعض الدروس .activeS :

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

يمكنك الآن التغيير: قبل النمط عن طريق إضافة الفئة إلى: قبل العنصر كما يلي:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

إذا كنت تريد فقط الحصول على محتوى :before من :before ، يمكن أن يتم على النحو التالي:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

في النهاية إذا كنت تريد التغيير ديناميكيًا :before المحتوى باستخدام jQuery ، يمكنك تحقيق ذلك كما يلي:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

النقر فوق الزر "changeBefore" أعلاه سوف يتغير :before محتوى #something إلى '22' وهو قيمة ديناميكية.

اتمني ان يكون مفيدا


يمكنك إنشاء موقع مزيف أو استخدام موقع موجود وترثه في صفحة أنماط العناصر الزائفة.

var switched = false;

// Enable color switching
setInterval(function () {
    var color = switched ? 'red' : 'darkred';
    var element = document.getElementById('arrow');
    element.style.backgroundColor = color;
    
    // Managing pseudo-element's css
    // using inheritance.
    element.style.borderLeftColor = color;
    
    switched = !switched;
}, 1000);
.arrow {
    /* SET FICTIONAL PROPERTY */
    border-left-color:red;
    
    background-color:red;
    width:1em;
    height:1em;
    display:inline-block;
    position:relative;
}
.arrow:after {
    border-top:1em solid transparent;
    border-right:1em solid transparent;
    border-bottom:1em solid transparent;
    border-left:1em solid transparent;
    
    /* INHERIT PROPERTY */
    border-left-color:inherit;
    
    content:"";
    width:0;
    height:0;
    position:absolute;
    left:100%;
    top:-50%;
}
<span id="arrow" class="arrow"></span>

يبدو أنه لا يعمل مع خاصية "المحتوى" :(


يمكنك استخدام المكون الإضافي لهذا الغرض.

مسج:

(function() {
  $.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      for (var element of parameters.elements.get()) {
        if (!element.pseudoElements) element.pseudoElements = {
          styleSheet: null,
          before: {
            index: null,
            properties: null
          },
          after: {
            index: null,
            properties: null
          },
          id: null
        };

        var selector = (function() {
          if (element.pseudoElements.id !== null) {
            if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);
            return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;
          } else {
            var id = $.pseudoElements.length;
            $.pseudoElements.length++

              element.pseudoElements.id = id;
            element.setAttribute('data-pe--id', id);

            return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
          };
        })();

        if (!element.pseudoElements.styleSheet) {
          if (document.styleSheets[0]) {
            element.pseudoElements.styleSheet = document.styleSheets[0];
          } else {
            var styleSheet = document.createElement('style');

            document.head.appendChild(styleSheet);
            element.pseudoElements.styleSheet = styleSheet.sheet;
          };
        };

        if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {
          element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
        };

        if (typeof parameters.argument === 'object') {
          parameters.argument = $.extend({}, parameters.argument);

          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
          };

          var properties = '';

          for (var property in parameters.argument) {
            if (typeof parameters.argument[property] === 'function')
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
            else
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
          };

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        } else if (parameters.argument !== undefined && parameters.property !== undefined) {
          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = {};
          };

          if (typeof parameters.property === 'function')
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
          else
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

          var properties = '';

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        };
      };

      return $(parameters.elements);
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var element = $(parameters.elements).get(0);

      var windowStyle = window.getComputedStyle(
        element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (element.pseudoElements) {
        return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  $.fn.cssBefore = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'before',
      argument: argument,
      property: property
    });
  };
  $.fn.cssAfter = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'after',
      argument: argument,
      property: property
    });
  };
})();

$(function() {
  $('.element').cssBefore('content', '"New before!"');
});
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element"></div>

يجب تحديد القيم ، كما هو الحال في الوظيفة العادية لـ jQuery.css

بالإضافة إلى ذلك ، يمكنك أيضًا الحصول على قيمة المعلمة pseudo-element ، كما هو الحال في الوظيفة العادية لـ jQuery.css:

console.log( $(element).cssBefore(parameter) );

JS:

(function() {
  document.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {
        styleSheet: null,
        before: {
          index: null,
          properties: null
        },
        after: {
          index: null,
          properties: null
        },
        id: null
      };

      var selector = (function() {
        if (parameters.element.pseudoElements.id !== null) {
          if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);
          return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;
        } else {
          var id = document.pseudoElements.length;
          document.pseudoElements.length++

            parameters.element.pseudoElements.id = id;
          parameters.element.setAttribute('data-pe--id', id);

          return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
        };
      })();

      if (!parameters.element.pseudoElements.styleSheet) {
        if (document.styleSheets[0]) {
          parameters.element.pseudoElements.styleSheet = document.styleSheets[0];
        } else {
          var styleSheet = document.createElement('style');

          document.head.appendChild(styleSheet);
          parameters.element.pseudoElements.styleSheet = styleSheet.sheet;
        };
      };

      if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {
        parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);
      };

      if (typeof parameters.argument === 'object') {
        parameters.argument = (function() {
          var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};

          for (var property in parameters.argument) {
            cloneObject[property] = parameters.argument[property];
          };

          return cloneObject;
        })();

        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
        };

        var properties = '';

        for (var property in parameters.argument) {
          if (typeof parameters.argument[property] === 'function')
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
          else
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
        };

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      } else if (parameters.argument !== undefined && parameters.property !== undefined) {
        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = {};
        };

        if (typeof parameters.property === 'function')
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
        else
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

        var properties = '';

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      };
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var windowStyle = window.getComputedStyle(
        parameters.element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (parameters.element.pseudoElements) {
        return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  Object.defineProperty(Element.prototype, 'styleBefore', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'before',
        argument: argument,
        property: property
      });
    }
  });
  Object.defineProperty(Element.prototype, 'styleAfter', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'after',
        argument: argument,
        property: property
      });
    }
  });
})();

document.querySelector('.element').styleBefore('content', '"New before!"');
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}
<div class="element"></div>

جيثب: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/


 $('.span').attr('data-txt', 'foo');
        $('.span').click(function () {
         $(this).attr('data-txt',"any other text");
        })
.span{
}
.span:after{ 
  content: attr(data-txt);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='span'></div>





pseudo-element