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

Рейтинг: 1Ответов: 1Опубликовано: 31.03.2023

Вроде бы свойства должны наследоваться, но почему-то не работает. Нужно, чтобы у каждого элемента меню было подчеркивание (не underline, а как отдельный элемент).

header > nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav_item {
    margin-left: 2%;
    margin-right: 2%;

    font-family: "Open Sans";
    text-transform: uppercase;
    font-size: 16px;
}

.nav_item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;

    left: 0;

    background-color: black;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <p class="nav_item">About</p>
            <p class="nav_item">Our company</p>
            <p class="nav_item">Support Us</p>
            <p class="nav_item">Gallery</p>
            <p class="nav_item">Book tickets</p>
        </nav>
    </header>
</body>
</html>

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Наследование свойств тут не при чём. Нужно просто задать родителям position: relative, а псевдоэлементам помимо left: 0 ещё и bottom: -2px, чтобы это было именно подчёркивание, а не надчёркивание:

header > nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav_item {
    margin-left: 2%;
    margin-right: 2%;
    font-family: "Open Sans";
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
}

.nav_item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: -2px;
    background-color: black;
}
<header>
  <nav>
    <p class="nav_item">About</p>
    <p class="nav_item">Our company</p>
    <p class="nav_item">Support Us</p>
    <p class="nav_item">Gallery</p>
    <p class="nav_item">Book tickets</p>
  </nav>
</header>