How do I access content earlier added by :before selector using jquery?

Question

Consider this example.

I have a div and before it I added some content using :before in css. Now I want to access content(which is "some text before div ") I have added using jquery.

How can I do that?

html:

<div>A div</div>

css:

div:before{
  content:"some text before div ";

}

@Amit I want to be able to change its style – user4913383 Aug 27 '16 at 06:56 — user4913383, Aug 27 '16 at 06:56

score 0 · Answer 1 · edited Aug 27 '16 at 07:13

0

$('a#change-text').click(function() {
  $("div:contains('A div')").toggleClass('v2');
});

a#change-text {
  color: #00f;
}
div:before {
  content: "some text before div ";
}
div.v2:before {
  content: "text was changed ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>A div</div>
<a id="change-text">Change text</a>

edited Aug 27 '16 at 07:13

Sidharth Gusain

1,473
1
13
20

answered Aug 27 '16 at 07:03

Maju

616
4
9

score 0 · Answer 2 · answered Aug 27 '16 at 07:28

function init() {
    document.getElementById("foo")
            .addEventListener("click", 
     function() {
            document.styleSheets[0].deleteRule[0];
            document.styleSheets[0].addRule('div:before','content: "some other text?"');
     }, false);
}
document.addEventListener( "DOMContentLoaded", init, false );

div:before{
  content:"some text before div ";
}

<body>
<input id="foo" type="button">
<div>[<-- div -->]</div>
</body>

How do I access content earlier added by :before selector using jquery?

2 Answers2