CSS устанавливает размеры изображения в процентах от родительского div, не устанавливая размеры родительского div

Question

Предложение:

У меня есть div, содержащий два элемента, ссылку и изображение с подчеркиванием, которое должно быть внизу.

Однако я не могу найти хороший способ установить ширину изображения, так как родительский div не имеет установленной ширины, ширина родительского элемента должна зависеть от длины текста a-link.

Кроме того, по некоторым причинам введено вертикальное заполнение. Наконец, родительский элемент div должен быть центрирован на странице.

Вопрос:

Как сделать так, чтобы подчеркивание было установлено на фиксированном расстоянии ниже текста, например, 5 пикселей?

И как я могу получить поля одинаковой высоты с шириной в зависимости от длины текста содержащей ссылки?

Вот как это выглядит:

Вот мой код:

---

.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>