Hover State And JS Click Function On A CSS After Element

Question

I have a css after element that needs to function like a back to top of page button but for some reason the hover state and jQuery click function do not seem to work. Not sure if its maybe a syntax error that I am missing?

HTML

<div id="divMain">
    ::after
</div>

CSS:

#divMain:after { content: 'Back  To Top'; position: relative; left: 93%; font-size: 16px; bottom: 30px; cursor: pointer; padding: 5px 10px; }
#divMain:after:hover { color: #b0f14f; }

JS/jQuery:

$('#divMain:after').click(function () {
        $('html, body').animate({ scrollTop: 0 }, 'fast');
    });

You can't access css pseudo elements through js. That's why they're called **pseudo** elements... — T J, Sep 09 '14 at 07:16
May be you can do it by applying `click` for `#divMain` instead of `#divMain:after`. Not sure about it. — Rishabh Shah, Sep 09 '14 at 07:18
Okay, I'll find another way of using the event then. Why wouldn't the hover state work though ? — Mikey, Sep 09 '14 at 07:18
http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — T J, Sep 09 '14 at 07:32

score -1 · Accepted Answer · edited May 23 '17 at 11:49

-1

https://stackoverflow.com/a/17789110/3381024

the :after selector cannot be reached by jquery as it is not technically part of the DOM.

if you are using jquery anyway, append another class to it. however for the use of an absolutely positioned element, not sure why :after would be needed when you can just make a new element and style it up anyway

edited May 23 '17 at 11:49

Community

1
1

answered Sep 09 '14 at 07:20

LiamHT

1,312
3
12
28

The problem is I am not able to edit the HTML and am creating the button purely for display purposes at the moment. – Mikey Sep 09 '14 at 07:23
ok. if you hhave access to the javascript try `$("body").append()` – LiamHT Sep 09 '14 at 07:24
@Mikey http://jsfiddle.net/L1suLj8a/ – LiamHT Sep 09 '14 at 07:30

Hover State And JS Click Function On A CSS After Element

1 Answers1