javascript - Copy To Clipboard Event Listener on CSS Pseudo Element

Question

I have several code snippets on my page, none of which have names or IDs.

<code>code section 1</code>
<code>code section 2</code>

I am using a CSS pseudo-element to automatically place a 'copy' icon after each code snippet.

code::after {
    content: "copy-icon";
    margin-left: 10px;
    cursor: pointer;
}

I want the text inside each code snippet to be copied when the icon next to it is clicked. I am having difficulty achieving this because I'm not able to reference the code snippets, or the icons, because neither have names or IDs.

Can anybody help me with the following:

1. Ensure the correct text is copied - depending on which icon is clicked.

2. Apply the event listener to the icons only, not the code snippets themselves.

I have attempted a JS Fiddle. I am quite stuck and could use some help.

https://jsfiddle.net/DekuDigital/zenymrav/

Thanks Antony

EDIT 1

I have tried to select the first pseudo-element as follows, but not working:

document.getElementsByTagName("code")[0], ':after'

question from:https://stackoverflow.com/questions/65830557/copy-to-clipboard-event-listener-on-css-pseudo-element

Answer 1

Waitting for answers