Как предотвратить перемещение контейнеров из-за заполнения элемента?

Question

Я пытаюсь создать табличный экран для своего списка архивов в своем блоге. Структура выглядит следующим образом:

a, a:active, a:visited { 
    color: rgb(140, 155, 196); 
    text-decoration: none; 
    transition: all ease-in-out 0.1s;
}

a:hover {
    border-bottom: rgba(111, 122, 153, 0.8) 1px dotted; 
    color: #3A414B;
    transition: all ease-in-out 0.1s;
}

.archives-list {
    margin: 0 auto;
}

.archives-list .archive {
    display: flex;
    flex-direction: row;
    margin: 0.3rem 0;
    padding: 0.1rem;
}

.archives-list .archive .archive-date {
    display: flex;
    flex-direction: column;
    margin-right: 0.8rem;
    font-size: small;
    text-transform: uppercase;
    font-weight: 700;
    color: #3A414B;
    min-width: 15%;
}

.archives-list .archive .archive-link {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 50%;
}

<div class="archives-list">
      <div class="archive">
          <div class="archive-date">Apr 4 2018</div>
          <a class="archive-link" href="/some/link">some post</a>
      </div>
</div>
<div class="archives-list">
      <div class="archive">
          <div class="archive-date">Apr 4 2018</div>
          <a class="archive-link" href="/some/link">some post</a>
      </div>
</div>

... в основном пунктирная граница снизу появляется при наведении курсора на ссылку. Итак, я заметил, что контейнер archive-link добавляет нижний отступ при каждом наведении курсора на ссылку архива, в результате чего все остальные элементы под ним немного сдвигаются. Это немного утомительно для кого-то очень придирчивого с мельчайшими пикселями.

Я все еще начинающий с flexbox, поэтому я попытался использовать другие типы дисплеев, но поведение сохраняется. На данный момент это то, для чего я работаю (без движущихся вещей).

Который является виновником заполнения контейнеров, и как можно изменить CSS так, чтобы элементы не подталкивают? Спасибо!

Answer 1

Прикрепляя границу к нижней части ссылки, вы фактически увеличиваете высоту элемента на один пиксель, в то время как на самом деле не добавляете никаких отступов.

Есть несколько способов обойти это.

Во-первых, вы можете использовать свойства декорирования текста, чтобы придать ему пунктирное подчеркивание вместо границы, которая вообще не приведет к росту высоты ссылки.

Вторая Вы могли бы сместить рост высоты в другом направлении с отрицательным полем, имея margin-top: -1px в правиле наведения. Это, однако, будет заметно, так как будет казаться, что оно сдвигается.

Третье, что вы можете попробовать, это задать ему определенную высоту и сказать, что это будет рамка для рамки. Пример: https://jsfiddle.net/o5bam9hp/2/

Возможно, проще всего было бы иметь прозрачную границу вокруг всей ссылки. Затем раскрасьте нижнюю часть при всплывающем событии. Это будет препятствовать росту или смещению элемента, поскольку вы просто переходите цвет. Пример: https://jsfiddle.net/m6qkjL50/