css - 大小 :pseudo element relevant to its parent size?

Question

是否可以调整尺寸 :pseudo与其父尺寸相关的元素？

我有一个 WordPress 网站，我在其中使用 :pseudo元素 ( .rectangle ) 用于页面上的某些标题。我希望图标的大小与其标题大小相关。所以让我们说 <h1>字体大小为 30px , 现在图标也将是 30px a.s.o.

HTML

<h1 class="rectangle">lorem...</h1>

CSS

.rectangle:before {
 content: "";
 display: inline-block;
 background-image: url('/wp-content/uploads/the_real_url_to_the_image');
 background-position: center;
 background-size: contain;
 background-repeat: no-repeat;
 width: 2rem;
 height: 2rem;
 margin-left: -3rem;
 margin-right: 1rem;
}

我确实相信它必须通过 jQuery 或 JavaScript 来完成，但我对它们都是新手，所以在我开始研究一些 jQuery 代码之前想问问你们的想法。

Answer 1

你可以考虑em单位，让背景覆盖所有区域:

.rectangle::before {
 content: "";
 display: inline-block;
 background: url('https://picsum.photos/50/50?image=0') center/cover;
 width: 1em;
 height: 1em;
 margin-right:0.2em;
}

<h1 class="rectangle">lorem...</h1>

<h2 class="rectangle">lorem...</h2>
<p class="rectangle">lorem...</p>

<small class="rectangle">lorem...</small>