html - :before to respect parent's padding

Question

我正在尝试使用 css 在带有 background-image 的 a 元素上插入 Logo 图像。

但是，我无法让 a:before 框遵守 a 的填充。

下面代码片段中的第一个示例使用了 width、height 和 display:block 但什么也没有显示。

因此，我在第二个示例中尝试使用 position: absolute。显示了 Logo ，但它不符合 a 的填充。

如何使 Logo 适合 a 的填充？

当前

预计

我想避免做什么

由于响应式设计要求，我希望根据 a 的元素大小更改 Logo 的大小。因此，下面是一些我想避免的事情。

• 使用固定值使 .logo:before 适合 a 的填充。
• 修改a样式

*, ::before, ::after {
  box-sizing: border-box;
}
body { margin: 0; }

.container, .container > p, .container > .logo {
  display: flex;
}

.container {
  align-items: center;
  justify-content: space-between;
  margin-left: 2rem;
  margin-right: 2rem;
}

.container > p, .container > .logo {
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
}

.logo {
  position: relative;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  color: transparent !important;
}

.logo:before {
  content: '';
  background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.logo.absolute:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<div class="container">
  <a class="logo">Logo</a>
  <p>Navigation links</p>
</div>

<div class="container">
  <a class="logo absolute">Logo</a>
  <p>Navigation links</p>
</div>

Answer 1

尝试将 Logo 的 top 和 bottom 属性的值更改为 .3125rem；

.logo.absolute:before {
  position: absolute;
  left: 0;
  right: 0;
  top: .3125rem;
  bottom: .3125rem;
}