Как вставить разделитель между ссылками (anchor)?

Question

Есть две ссылки нужно чтобы они были в одну линию и между ними был знак |:

<div>
  <a href="URL">Служба поддержки</a>
  <a href="URL">задать вопрос</a>
</div>

С первой проблемой справился заключив их в div, а в CSS прописав:

display: block;

но как поставить этот символ между ними?

Answer 1

<div>
    <span>Служба поддержки</span>
    <span>|</span>
    <span>задать вопрос</span>
</div>

Answer 2

Инлайн (фиксированный отступ):

div > a, div > span {
 display: inline-block;
}

div > span {
  margin: 0 10px;
}

<div>
  <a>Служба поддержки</a>
  <span>|</span>
  <a>Задать вопрос</a>
</div>

Flex (фиксированный отступ):

div {
  display: flex;
}

div > a, div > span {
 display: block;
}

div > span {
  margin: 0 10px;
}

<div>
  <a>Служба поддержки</a>
  <span>|</span>
  <a>Задать вопрос</a>
</div>

Flex (динамическое распределение):

div {
  display: flex;
  justify-content: space-around;
}

div > a, div > span {
 display: block;
}

<div>
  <a>Служба поддержки</a>
  <span>|</span>
  <a>Задать вопрос</a>
</div>

Отступы:

В примерах 1 и 2 их можно регулировать при помощи padding или margin, указав в качестве таргета span, который содержит символ |.

В примере 3 отступы выставляются автоматически в зависимости от ширины родительского элемента div и настроек свойства justify-content ("space-around", "space-between", etc.).

БЛОГ НА HUSL

Как вставить разделитель между ссылками (anchor)?

Ответы (2 шт):