Подчеркивание текста шапки сайта

Есть ссылка

#pageHeader {
    grid-area: header;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pageHeader .mainpart {
        padding-left: auto;
        padding-right: auto;
        width: 1200px;
        align-self: center;
        border-bottom: 5px dotted black;
        font: 18px, PT Sans,sans-serif;
}

.icon {
        align-self: center;
}

.citylink{
        border-bottom: 5px dotted black;
        font: 18px, PT Sans,sans-serif;
}
<header id="pageHeader">
<div class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
<!--<i class="i-icon i-icon-fl-location">
:before
</i>-->
</div>
<div class="mainpart">
<a href="#" class="citylink">Краснодар</a>
</div>
</header>

Но в браузере точечный пунктир не отображается

введите сюда описание изображения

  1. Как добиться пунктира?
  2. Каким образом выровнять текст Краснодар по середине относительно иконки?

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