Вопрос на верстку кнопки с 2-мя строками?

Question

[Филип]

Есть кнопка в 2 строки:



У меня пока 2 варианта решения. И меня интересует как семантичней всего перенести текст? Может и не по моим вариантам.

1)

<a class="nav-link"><span class="sort-variant">Sort by Duration</span>Shortest €250 (20h 25m)</a>

.nav-link {display: block}

.sort-variant {
display: block;
font-weight: 700;
}

2)

<a class="nav-link"><strong>Sort by Duration</strong><br>Shortest €250 (20h 25m)</a>

Answer 1

[Exploding]

А где тут собственно семантика то?)) Да если бы она и была, чего Вы хотите добиться от ПС в итоге этими данными?
Может конечно я чего-то не понимаю, но интересно было бы взглянуть на остальную разметку, если переносу слова на кнопке столько внимания уделяется...

Answer 2

[Lumore]

Еще как вариант:

.nav-link {
  display: flex;
  flex-direction: column;
}
.sort-variant {
  font-weight: 700;
}

Answer 3

[Froggyweb]

Span лучше.