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>

大小：伪元素与其父大小有关？

1 个答案: