CSS将图片尺寸设置为父div的百分比，而没有设置父div的尺寸

Question

主张：

我有一个div，其中包含两个元素，一个链接和一个带下划线的图像，该图像应位于其底部。

但是，由于父div没有设置宽度，我找不到设置图像宽度的好方法，但父div的宽度应取决于a-link文本的长度。

此外，出于某些原因引入了垂直填充。 最后，父div应该以页面为中心。

问题：

如何将下划线设置在文本下方的固定距离处，例如5px？

然后，如何根据包含的链接的文本长度使框的高度和宽度相同？

这是它的外观：

这是我的代码：

---

.navMain {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

.linkBox {
  display: inline-block;
  padding-right: 20px;
}

.linkBox a {
  position: relative;
  text-decoration: none;
  color: black;
  padding: 0;
  margin: 0;
}

.linkBox img {
  position: relative;
  padding: 0;
  margin: 0;
}

<div class="navMain">
  <div class="linkBox">
    <a routerLink="/ordering"> Place order</a>
  </div>
  <div class="linkBox">
    <a routerLink="/invoices"> Invoice overview</a>
    <img src="/static/images/internalnavbardiv/blueFilterLine.svg">
  </div>
  <div class="linkBox">
    <a routerLink="/registerinvoice"> Register invoice</a>
  </div>
</div>

Answer 1

只需使用渐变即可实现此目的，而无需使用img或svg：

.navMain {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

.linkBox {
  display: inline-block;
  padding-right: 20px;
}

.linkBox a {
  position: relative;
  text-decoration: none;
  color: black;
  padding-bottom: 5px;
  margin: 0;
}
.decorate {
  background:linear-gradient(blue,blue) bottom/100% 1px no-repeat;
}

<div class="navMain">
  <div class="linkBox">
    <a routerLink="/ordering"> Place order</a>
  </div>
  <div class="linkBox">
    <a routerLink="/invoices" class="decorate"> Invoice overview</a>
  </div>
  <div class="linkBox">
    <a routerLink="/registerinvoice" class="decorate"> Register </a>
  </div>
</div>

您还可以将图像或svg用作背景：

.navMain {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

.linkBox {
  display: inline-block;
  padding-right: 20px;
}

.linkBox a {
  position: relative;
  text-decoration: none;
  color: black;
  padding-bottom: 5px;
  margin: 0;
}
.decorate {
  background:url(https://picsum.photos/200/100?image=1040) bottom/80% 2px no-repeat;
}

<div class="navMain">
  <div class="linkBox">
    <a routerLink="/ordering"> Place order</a>
  </div>
  <div class="linkBox">
    <a routerLink="/invoices" class="decorate"> Invoice overview</a>
  </div>
  <div class="linkBox">
    <a routerLink="/registerinvoice" class="decorate"> Register </a>
  </div>
</div>