javascript -::after 伪元素的垂直对齐

Question

当我将 svg 图像放置在文本旁边并使用 vertical-align: middle; 时，它会很好地对齐。但是，如果我在 ::after 伪元素中使用 svg，则结果不会达到预期。

此外，当我单击文本以删除其内容时，剩余的 svg 元素仍保持其未对齐的位置:

这是代码:

document.getElementById('em1').addEventListener('click', e => {
  (e.target || e.srcElement).innerText = '';
});
document.getElementById('em2').addEventListener('click', e => {
  (e.target || e.srcElement).innerText = '';
});
document.getElementById('em3').addEventListener('click', e => {
  (e.target || e.srcElement).innerText = '';
});

* {
  vertical-align: middle;
}
div {
  background-color: yellow;
}
em {
  background-color: pink;
  cursor: pointer;
  font-size: 41px;
}
#em2::after, #em3::after {
  content: url("data:image/svg+xml,%3Csvg%20width%3D%22110%22%20height%3D%2246%22%20viewBox%3D%220%200%20110%2046%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23f00%3Bstroke-width%3A0%22%20d%3D%22M%200%2C0%20H%20110%20V%2046%20H%200%20Z%22%20%2F%3E%3C%2Fsvg%3E");
}
#em3::after {
  vertical-align: middle;
}

<div>
  <em id="em1">text #1</em><svg width="110" height="46" viewBox="0 0 110 46"
    version="1.1" xmlns="http://www.w3.org/2000/svg"><path 
    style="fill:#f00;stroke-width:0" d="M 0,0 H 110 V 46 H 0 Z" /></svg>
</div>
<hr>
<div>
  <em id="em2">text #2</em>
</div>
<hr>
<div>
  <em id="em3">text #3</em>
</div>

如何进行这项工作，需要调整哪些内容，为什么？为什么 ⁣::after 伪元素不自动与其“父元素”对齐？

Answer 1

可以通过给出 vertical-align: text-bottom; 来解决高度:46 像素； display: inline-block; 到 after 伪元素:

document.getElementById('em1').addEventListener('click', e => {
  (e.target || e.srcElement).innerText = '';
});
document.getElementById('em2').addEventListener('click', e => {
  (e.target || e.srcElement).innerText = '';
});
document.getElementById('em3').addEventListener('click', e => {
  (e.target || e.srcElement).innerText = '';
});

* {
  vertical-align: middle;
}
div {
  background-color: yellow;
}
em {
  background-color: pink;
  cursor: pointer;
  font-size: 41px;
}
#em2::after, #em3::after {
  content: url(data:image/svg+xml,%3Csvg%20width%3D%22110%22%20height%3D%2246%22%20viewBox%3D%220%200%20110%2046%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23f00%3Bstroke-width%3A0%22%20d%3D%22M%200%2C0%20H%20110%20V%2046%20H%200%20Z%22%20%2F%3E%3C%2Fsvg%3E);
  vertical-align: text-bottom;
  height: 46px;
  display: inline-block;
}

<div>
  <em id="em1">text #1</em><svg width="110" height="46" viewBox="0 0 110 46"
    version="1.1" xmlns="http://www.w3.org/2000/svg"><path 
    style="fill:#f00;stroke-width:0" d="M 0,0 H 110 V 46 H 0 Z" /></svg>
</div>
<hr>
<div>
  <em id="em2">text #2</em>
</div>
<hr>
<div>
  <em id="em3">text #3</em>
</div>