CODEWITHSUNDEEP
jquerycss
MichaelS
MichaelS

Reputation: 3831

Get Before-Content of CSS with jQuery

I have the following CSS

h1:before {
    content: "Chapter " counter(lvl1) "\000d\000a";
    counter-increment: lvl1;
    white-space: pre-wrap;
}
h1 {
    page-break-before: right;
}

and this HTML

<p>...</p>
<h1>A Title</h1>
<p>...</p>

With the given CSS I get something like

Chapter 1
A Title

When I try to get the text with jQuery I get "A Title". Is there a possibility to get "Chapter 1\nA Title"?

Thanks

Upvotes: 12

Views: 13154

Answers (1)

David Thomas
David Thomas

Reputation: 253328

Use getComputedStyle():

$('h1').each(function(){
    console.log(window.getComputedStyle(this,':before').content);
});

before() is a jQuery method used to traverse the DOM, it gets/sets the preceding element, it does not access the pseudo-element.

Working JS Fiddle, supplied by Eric.

Though there is the unfortunate caveat that this approach returns the literal string used in the content declaration, rather than the actual generated-content.

Upvotes: 28

Related Questions