pseudo-element is inserted at an incorrect position #360
Description
Describe it simply:
pseudo-element is inserted at an incorrect position
Quick demo to reproduce
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>snapdom demo</title>
<style>
.ant-descriptions-item-container {
display: flex;
}
.ant-descriptions-item-label::after {
content: ":";
position: relative;
top: -0.5px;
margin-inline: 2px 8px;
color: red;
}
.ant-descriptions-item-content {
margin-left: 24px;
}
</style>
</head>
<body>
<code id="ua"></code>
<br />
<button id="snapdom">snapdom</button>
<button id="download">download svg</button>
<div style="outline: 1px solid red">
<main>
<title>title</title>
<div class="ant-descriptions-item-container">
<span class="ant-descriptions-item-label">Address</span
><span class="ant-descriptions-item-content"
>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang,
China</span
>
</div>
<div>
<span>Address</span><span>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</span>
</div>
</main>
</div>
<h2>snapdom result</h2>
<div id="snapdom-result" style="outline: 1px solid green"></div>
<h2>iframe preview</h2>
<div id="iframe-preview" style="outline: 1px solid green"></div>
</body>
<script type="module">
document.getElementById("ua").textContent = navigator.userAgent;
import { snapdom } from "https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.mjs";
document.getElementById("snapdom").addEventListener("click", async () => {
const $main = document.querySelector("main");
const result = await snapdom($main);
const $img = await result.toPng();
document.getElementById("snapdom-result").innerHTML = "";
document.getElementById("snapdom-result").appendChild($img);
const $iframe = document.createElement("iframe");
$iframe.src = result.url;
$iframe.style.width = "100%";
$iframe.style.height = $main.offsetHeight + 200 + "px";
document.getElementById("iframe-preview").innerHTML = "";
document.getElementById("iframe-preview").appendChild($iframe);
});
document.getElementById("download").addEventListener("click", async () => {
const $main = document.querySelector("main");
const result = await snapdom($main);
await result.download({ format: "svg", filename: "screenshot" });
});
window.addEventListener('DOMContentLoaded', async () => {
document.getElementById("snapdom").click()
});
</script>
</html>
Anything else we should know?
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36