pseudo-element

Does the universal selector * affect pseudo elements like :before and :after ? Let me use an example: When doing this: * { box-sizing: border-box; } ...doesn't the above declaration automatically include/affect pseudo elements like :before and :after as well? Or, in order to affect pseudo elements like :before and :after , one has to declare this? *, *:before, *:after { box-sizing: border-box; } Does this make sense? I have always used just * { box-sizing: border-box; } and never have had any issues with pseudo elements whatsoever. But I see many tutorials doing *, *:before, *:after but they

Is it possible to have a new line in a data attribute ? I am trying to do something like this: CSS: [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-foo="First line \a Second Line">foo</div> I found that "\a" is a new line in CSS, but still does not work for me. Here is how this can work. You need to modify your data attribute as follows: <div data-foo='First line Second Line'>foo</div> and the CSS (proof of concept): [data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; } Fiddle Demo:

How can I combine a pseudo-element selector ( :after ) with an attribute selector ( [title] )? I tried using div[title]:after , but this doesn't work in Chrome. HTML: <div title="foo">This div has a title.</div> <div>This div does not have a title.</div> CSS: div:after { content: "NO"; } div[title]:after { content: "YES"; } Demo: http://jsfiddle.net/jmAX6/ It shows me "YES" at the end of each of those div's, when it should show "NO" after the second div. I'm running Chrome 17.0.963.38. It seems to work fine in Safari 5.1.2. This looks like a bug, which has finally been reported . If you add a

I have a :before for an opening 'quote' and an :after for a closing quote. Now what I want is an :after:after for the 'cite' reference but I cant get it to work. Does anyone know if this is possible? My code so far:- blockquote:before { content: '\201C'; } blockquote:after { content: '\201D'; } blockquote { font-size: 22px; line-height: 24px; text-indent:60px; } blockquote:before { font-size: 170px; margin-left: -136px; margin-top: 50px; opacity: 0.2; position: absolute; overflow:visible; float:left; width:135px; } blockquote:after { float: right; font-size: 170px; margin-right: 35px; margin

Possible Duplicate: Manipulating CSS pseudo-elements using JQuery On pageload I want the :before and :after elements on a class to appear. I've set the .lifted:before and .lifted:after to be opacity:0 in the css. Within document ready I have: $(".lifted:before").css("opacity", "1"); $(".lifted:after").css("opacity", "1"); This doesn't work. And the .after jQuery manipulator is only made for inserting content as far as I can tell. Is there any way I can manipulate the css of these pseudo-elements using jQuery? Decided to go with the solution of adding a class on load to the element and then

From MDN: The :: notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation : introduced in CSS 2. If the notation : will always be accepted by CSS3 browsers, should I use it because it works on old and new browsers? Or should I use both of them, : for old browsers and :: for new ones, because the notation : won't be always accepted? Note : I think my question isn't a duplicate isn't a duplicate of Should I use single or double colon notation for pseudo-elements? because the other question asks about