You can’t use the :before
and :after
pseudo-elements like this. The purpose of them is to insert content before and after (respectively) the selector you have specified.
Example usage:
HTML:
<span class="a">
Outer
<span class="b">
Inner
</span>
</span>
CSS:
.a .b:before {
content: "|Inserted using :before|";
}
.a {
color: blue;
}
.b {
color: red;
}
Result:
What happened was that the text |Inserted using :before|
was inserted before (well, really, prepended into) the inner span because it was class b
and a descendant of an element of class a
. Basically, :before
and :after
don’t select; they modify.
Example:
This doesn’t work as expected:
HTML:
<span class="a">
<p>More text</p>
<span class="b">
<p>More text</p>
Inner
</span>
</span>
CSS:
.a .b:before {
text-size: 100px;
}
Nothing happens:
EDIT:
:before
is not a valid jQuery selector: http://api.jquery.com/category/selectors/
I think you will need to use something other than :before
or attempt to extract the original rule using the jQuery plugin: http://flesler.blogspot.com/2007/11/jqueryrule.html