CSS pseudo elements

[squidgemonster]

I have a feeling that these may well be omitted as they are notoriously tricky elements, but I hoping there is a fix/possibility to allow the display of ::before and ::after pseudo elements in generated JPG and/or PNG.

Expected Behavior

Styled pseudo elements should be rendered in the generated image. Currently have an example page that has a LOT of pseudo elements with background images on them.

Current Behavior

All pseudo elements are missed in the rendered image.

Possible Solution

Unsure sadly :(

Steps To Reproduce

Add a styled pages with a background-image applied to a CSS pseudo element and this does not appear on the rendered image.

Error Message & Stack Trace

NA

• html-to-image: 1.11.4
• OS: macOS Monterey 12.6
• Browser: Chrome 108.0.5359.124

[biiibooo[bot]]

👋 @squidgemonster

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[pcantarelli]

Hi there, I'm having the same issue, more specifically with the styles of the ::placeholder pseudo element (should not be visible because of opacity: 0;)

I can see that @chahu opened an Issue for that last year (#269), which got closed due to stale. His issue has a detailed explanation of this behavior in case need, but the workaround solution does not work for me at the moment, since I need the placeholder text hidden on the screenshot image.

Can anyone help with that?

[DustinBrett]

There is code to do some cloning btw. https://github.com/bubkoo/html-to-image/blob/efdf04338f3b943e9a0b27c4e1ee0b09d470c743/src/clone-pseudos.ts#L34

I used it for partially cloning webkit-slider-thumb, although it still wasn't perfect.

[jkieboom]

I ran into this issue as well with a background-image in a :before pseudo element. My current workaround is to post-process the SVG from html-to-image to convert the external referenced images to embedded data urls. Would be great if this could be done inside html-to-image.

[hungtcs]

👀 Any progress? html-to-image won't render my watermark, it was implemented with pseudo-elements and background images, which I now have to replace with other tags.

[zhang-xianhong]

May I ask if there is a solution to this problem? Could you please help answer it