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?

Improve this question
9
  • You can add a class to it and target it with css stackoverflow.com/questions/5814810/… look at the top answer. I searched for "jquery target :after" first result in google Commented Nov 20, 2013 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. Commented Nov 20, 2013 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. Commented Nov 20, 2013 at 20:18
  • :after is not a valid jQuery selector: api.jquery.com/category/selectors Commented Nov 20, 2013 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. Commented Nov 20, 2013 at 20:34
Related questions
8740
How do I check if an element is hidden in jQuery?
4607
Setting "checked" for a checkbox with jQuery
5229
How do I check whether a checkbox is checked in jQuery?
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.