Check CSS pseudo elements with squish web API

Rino · wrote on 24 Apr 2025, 10:12

Hi,
how can I check the CSS pseudo elements (::after, ::before) of a HTML object?

Thanks

henry.ishiyama · wrote on 1 May 2025, 04:36

You can execute JavaScript code with "evalJS" function.

Following is an example, if you want to get the content of the element created by "::after" CSS pseudo element,

~ Squish script in Python ~
tmp = evalJS(f'let tmp = window.getComputedStyle(document.getElementsByClassName("ribbon")[0], "::after").content; tmp')
test.log(f'{tmp}')
~ Squish script in Python ~


~ Associated HTML code ~
<html>
    <head>
        <title>Test</title>
        <style>
            .ribbon::after {
                content: "This is a content added by ::after of CSS pseudo element.";
                background-color: #ffba10;
                border-color: black;
                border-style: dotted;
            }
        </style>
    </head>
    <body>
        <p class="ribbon">Look at the orange box after this text. </p>
    </body>
</html>
~ Associated HTML code ~

NOTE :
For more information regarding "evalJS" function and its usage, please refer to our following documentation.
https://doc.qt.io/squish/web-evaljs-function.html#web-evaljs-function
https://doc.qt.io/squish/how-to-use-the-web-api.html#how-to-use-evaljs