Не могу сделать чтобы бордеры образовали одну сплошную линию

Question

Есть пример как это должно выглядеть, но я не могу сделать так, чтобы был один бордер серый внизу, при клике на текст, на то же место но под текстом добавлялся новый бордер с другим текстом (как на скриншоте) UPD: виглядает сейчас это так: https://jsfiddle.net/p1e0/ro7m5j83/2/

.container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 1px gray solid;
}

.p1 {
  margin-right: 15px;
}

.active {
  color: black;
  border-bottom: 1px solid blue;
}

.inactive-color {
  color: rgb(157, 164, 174);
}

<div class="container">
  <span class="p1 active">Published</span>
  <span class="p2 inactive-color">Received</span>
</div>

Answer 1

Вы можете сделать бордер всему меню снизу. Будет одна сплошная линия для всех кнопок. А отдельно под каждую кнопку завести псевдокласс :hover который будет срабатывать при наведении.

.class:hover{
   border-bottom: 2px solid #82b6fd;
}

К сожалению Вы не предоставили код самого меню, сложно сказать что именно Вам подойдёт лучше.

Как вариант сделать border-bottom: 2px solid #e7e7e7; всем кнопкам, а с помощью псевдокласса :hover будет перекрываться первый стиль.

Answer 2

<div class="container">
   <span class="p1">Published</span>
   <span class="p2">Received</span>
</div>

.container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 1px gray solid;  
}

.p1 {
  margin-right: 15px;
}

.active {
  color: black;
  border-bottom: 1px solid blue;  
}

const navItems = document.querySelectorAll('.container span');
navItems.forEach(navItem => {
    navItem.addEventListener('click', () => {
        navItems.forEach(navItem => {
            navItem.classList.remove('active');
        });
        navItem.classList.add('active');
    });
});

Answer 3

.container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 2px solid #eee;
}

span {
  margin-right: 15px;
  color: #999;
  padding: 5px;
}

.active {
  color: black;
  box-shadow: 0 2px 0 blue;
}

<div class="container">
  <span>Published</span>
  <span class="active">Received</span>
</div>

БЛОГ НА HUSL

Не могу сделать чтобы бордеры образовали одну сплошную линию

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