Elementor Heading Doesn’t Hover

Creating a website with Elementor, I added the following code to the Headings:

<span class="pos"> Something </span> 

Custom CSS:

.pos:hover{opacity: 0.7; color: orange;}

It is working when I am in Editing, but when I am checking it out in real life it just doesn’t work anymore.

Why could it be?