Вертикально выровнять диапазон: после относительно текста

Question

Я создал меню со ссылками, которые имеют «список маркеров», реагирующих на зависание, например this .

Каждый элемент обернут span , ииспользуйте : после для создания маркеров.

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

Однако при попыткецентрируйте его, используя vertical-align: middle; (и любые другие средства, которые мне удалось найти), результаты в этом этом (проверка показывает, что текст правильно центрирован на контейнере), и я не могу найти какой-либоспособ получить его по центру.

Здесь это скрипка.

Answer 1

Можете ли вы попробовать, если этот код делает то, что вам нужно:

%linkBase {  
  $fontSize: 40px;
  line-height:40px;
  font-size: $fontSize;
  position:relative;
  &::after {
    $bulletHeight: $fontSize * 0.8;

    content: '';

    display: inline-block;

    width: 2px;
    height: 40px;

    background-color: black;
    top:50%;
    position:absolute;
    margin-top:-20px;
  }
}

.link {
  @extend %linkBase;
}

.linkCentered {
  @extend %linkBase;
}

Идея состоит в том, что вы устанавливаете исходную ссылку как относительную, а затем устанавливаете элемент "after" как абсолютно позиционированный.Затем вы устанавливаете «вершину» этого элемента на 50%, что толкает его на полпути вниз, затем вы тянете его назад с полем вершины, равным половине его высоты.Это распространенный метод центрирования элементов.