add a first character of text to css

Question

I got a challenging task here and really hope that you can help me.

I am taking the info from json feed by ajax and want to add only first character of my item.title as content css attribute to the #list > .item:before

 var str = item.title;
 $('#list > .item:before').attr('content', str.substring(0,1));

But for some reason it doesn't work. Please advise me a line of code how to make it happen.

Thanks a lot in advance.

Pseudo elements are not part of the DOM and can not be manipulated directly using jQuery. You can work aroun it however. This might help you on the way: http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after — Pevara, Jul 09 '13 at 20:01

score 2 · Accepted Answer · answered Jul 09 '13 at 20:02

You can't change pseudo-classes with jQuery.

I'd suggest simply prepending it as a span:

$('#list > .item').prepend('<span>' + str.substring(0,1) + '</span>');

And, assuming you have other CSS that's targeting the :before to style it, change the CSS selector to #list > .item > span

score 0 · Answer 2 · answered Jul 09 '13 at 20:05

0

Why not just use CSS :first-letter to control the output? https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

answered Jul 09 '13 at 20:05

add a first character of text to css

2 Answers2