3

I'm using CSS generated content to add a fade to the bottom of my page:

body::after {
    background: linear-gradient(transparent, #000);
    bottom: 0;
    content: "";
    height: 25%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 8;
}

I want to dynamically change the value for bottom via jQuery; however, I can't seem to target the pseudo-element. For instance, something like this doesn't work:

$("body::after").css("bottom", value);

Is there any way to do this?

daGUY
  • 27,055
  • 29
  • 75
  • 119
  • You can add a class to it and target it with css http://stackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery look at the top answer. I searched for "jquery target :after" first result in google – Huangism Nov 20 '13 at 20:18
  • 1
    Pseudo-elements aren't actually elements, and aren't in the DOM...making them untargetable by JS in your typical (conforming) browser. Seems to me you might have to do some dynamic stylesheet magic if you want to tweak them. – cHao Nov 20 '13 at 20:18
  • Since pseudo elements aren't actually elements, you'd have to add or modify the actual CSS style rule or insert an actual element there and style it. – jfriend00 Nov 20 '13 at 20:18
  • :after is not a valid jQuery selector: http://api.jquery.com/category/selectors/ – geedubb Nov 20 '13 at 20:22
  • Using a class won't help because the value I want to use for `bottom` is dynamic. If I added a class, I'd still have to set a defined value for `bottom` in the CSS and wouldn't be able to change it via jQuery, so that makes no difference. Sounds like this isn't possible. – daGUY Nov 20 '13 at 20:34
  • Maybe something could be worked out with appending Internal CSS to the actual document like [THIS POST](http://stackoverflow.com/questions/7125453/modifying-css-class-property-values-on-the-fly-with-javascript-jquery/19613731#19613731)? – MonkeyZeus Nov 20 '13 at 20:42
  • I ran your CSS in JSFiddle because I am honestly not familiar with pseudo-elements but I think the reason jQuery is having an issue is because the DOM actually looks like this upon getting inspected `:after` – MonkeyZeus Nov 20 '13 at 20:45
  • If you `console.log('body');` then in the console window you have to follow this trail to see the style decleration: body -> context: document -> styleSheets: StyleSheetList -> 2: CSSStyleSheet -> rules: CSSRuleList -> 0: CSSStyleRule -> cssText: "body::after{ ABunchOfRules}" – MonkeyZeus Nov 20 '13 at 20:51
  • Hi again: http://jsfiddle.net/e27N7/1/ – MonkeyZeus Nov 20 '13 at 20:59

0 Answers0