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>