Как добавить и расположить «палочку» под словом О компании именно в таком положение как она есть в приложенном фото?

Question

[squimen]

HTML - Шапки

<header class="header">
        <div class="container">
    <img src="/images/123.svg" alt="123" class="header_logo">
    
    <nav class="header_nav">
        <ul class="header_list">
        <li><a class="active" href="#!">О компании</a></li>
        <li><a href="#!">Узнать больше</a></li>
        <li><a href="#!">Отзывы</a></li>
        <li><a href="#!">FAQ</a></li>
        </ul>
            </nav>
        <ul class="menu">
        <a href="#!" class="btn">Авторизоваться</a>
        <a href="#!" class="btn2">Регистрация</a>
    </ul>

СSS - Шапки

/* Шапка */

.header {
 padding: 20px;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header_logo {

}

.header_nav {

}

.header_list {
display: flex;
gap:30px;
}

.header_nav a {
  color: #8B8B8B;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.header_nav a.active {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

.menu {
  display: flex;
  gap:10px;
}

.btn {
  color: #000;
  font-family: Gilroy;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 187.5% */
 
  display: flex;
width: 153px;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 255px;
border: 1px solid #000;
}

.btn2 {
  color: #FFF;
font-family: Gilroy;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 187.5% */

display: flex;
width: 192px;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 255px;
border: 1px solid #000;
background: #8B63FF;
}

CSS - палочки

width: 72px;
height: 4px;
flex-shrink: 0;
background: #8B63FF;

Answer 1

[Hovo_Varosyan]

попробуй

.header_nav li {
            list-style: none;
            position: relative;
            padding-bottom: 10px;
            
        }

        .header_nav li::before {
            position: absolute;
            content: '';
            width: 72px;
            height: 4px;
            flex-shrink: 0;
            background: #8B63FF;
            bottom: 0;
            left: 0;
            border: 1px solid blue;

        }

Comments

[Ankhena]

Если не нужно выносить полоску за пределы элемента, то убрать абсолют и использовать только блочность псевдика. Будет вообще шикарно.