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:
Ensure the correct text is copied - depending on which icon is clicked.
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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…