Недопонимаю абсолютное позиционирование и как оно связано с размерами блока

Question

a.Products:after и a.Services:after отвечают за такой знак "|", типа разделяют. Захотел сделать им padding, чтобы | находились по центру между словами. По случайности забыл убрать position: absolute, прежде я хотел их выровнять с помощью этого свойства, но тяжелее считать было. И всё нормально, знаки выровнялись и я убрал position: absolute из стилей (посчитал ненужным). И вот, что произошло: знак | присоединился к блоку со словом, стал единым с ним, а при position: absolute было так, словно это отдельный символ добавили. Объясните, пожалуйста?

nav.top_menu {
  font-size: 19px;
  display: inline-block;
  right: 300px;
  top: 18px;
  font-family: 'Roboto', sans-serif;
  word-spacing: 20px;
}

.top_menu a {
  text-decoration: none;
}

a.Products:after {
  content: '|';
  padding-left: 10px;
  position: absolute;
}

a.Services:after {
  content: '|';
  padding-left: 10px;
  position: absolute;
}

<nav class="top_menu">
  <a class="Products" href="#">Products</a>
  <a class="Services" href="#">Services</a>
  <a class="Contact" href="#">Contact</a>
</nav>

Answer 1

Так вроде всё просто. По умолчанию ::afterсоздаёт псевдоэлемент, который является последним потомком выбранного элемента и по умолчанию является инлайновым. Т.е. логично, что по умолчанию он просто следует сразу за последним элементом (в данном случае за Products и Services). Да, да, как бы прилипает к концу слова Services (если вмещается на эту же строку).

Если укажете position: absolute этот элемент покинет нормальный поток документа (станет отдельным элементом, как вы выражаетесь). Но он остается на своем месте, так как координаты смещения не заданы. И если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

Положение элемента ::after при position: absolute (если координаты смещения не заданы) будет отсчитываться от правого края слова Services. Свойства padding и margin будут работать только сверху и слева, а снизу и справа не будут (а при инлайне будут).

Answer 2

Вам не нужно использовать position: absolute, а уж тем более выдавать каждому элементу свой класс и свои одинаковые свойства..

nav.top_menu {
  font-size: 19px;
  display: inline-block;
  right: 300px;
  top: 18px;
  font-family: 'Roboto', sans-serif;
}

.top_menu a {
  text-decoration: none;
}

.top_menu a:not(:last-child):after {
  content: '|';
  padding-left: 10px;
  margin-right: 5px;
}

<nav class="top_menu">
  <a href="#">Products</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

БЛОГ НА HUSL

Недопонимаю абсолютное позиционирование и как оно связано с размерами блока

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