chwtanie pseudoelementów w js

Question

Witom!

Jak "chwycić" pseudoelement ::after?

<div>
    text
    ::after
</div>

chcę złapać ten pseudoelement w js, by pozycjonować jego rodzicem div'em i nim samym (jeżeli w ogóle się da). 

próbowałem metodą querySelector na różne sposoby

const pseudoEl = document.querySelector("div.tooltip::after");

const pseudoEl = document.querySelector("div.tooltip:after");

const pseudoEl = document.querySelector("div.tooltip.after");

ale finalnie robię tooltip z nadole takim dziubkiem i czubek tego dziubka to mój punkt jakby, jeżeli ustawie pozycje x i y to ten punkt dziubka ma się tam ustawić a nie div w którym jest dziubek.

Answer 1

Pseudo elementy są abstrakcją stworzoną przez CSS - tych bytów nie ma w DOM, więc nie dostaniesz się do nich przez metody łapiące elementy, takie jak getElementBy* i querySelector[All].

Możesz odczytać style tego bytu metodą getComputedStyle, ale to nie zwróci Ci pseudo elementu jako takiego, bo go nie ma w DOM.

---

W jakiej sytuacji chcesz pozycjonować element, z którego wywodzi się jego pseudo element? Czemu nie złapiesz elementu docelowego, tylko chcesz to robić przez pseudo element?

Comments

tak właśnie zrobiłem i osiągnąłem efekt jaki chciałem, myślę że źle rozumiałem sytuacje, po prostu chciałem spróbować każdą z opcji która mi wtedy przyszła do głowy, teraz już rozumiem że łapanie pseudo elementu i go pozycjonowanie jest bez sensu i że nie działa to w ten sposób.

efekt finalny to ten dymek na dole "link", dymek wy pozycjonowałem względem najechanego elementu, teraz chcę by dymek pojawiał się po np. 1 sekundzie

 

Answer 2

pseudoelement jak w samej nazwie jest zawarte, nie istnieje jako element i nie da się go "chwycić" inaczej niż przez css :p 

możesz na parencie umieścić css variables, albo użyj wartości attr, które zrobią to co chcesz z pseudoelementem :P

https://codepen.io/felquis/pen/wHAxe

Answer 3

How to get pseudo element?

Get Pseudo elements using Javascript

Selecting and Modifying CSS Pseudo-Elements with JavaScript

window.getComputedStyle(
	document.querySelector('section'), ':before'
).getPropertyValue('left');