Не получается сделать данную форму а именно отодвинуть нижний бордер с активным бордером как на изображении может кто то подскажет?

Question

[Sergey S19S93]

<div class="tabs">
                        <div class="tabs__nav">
                          <a class="tabs__link tabs__link_active" href="#content-1">1 модуль</a>
                          <a class="tabs__link" href="#content-2">2 модуль</a>
                          <a class="tabs__link" href="#content-3">3 модуль</a>
                          <a class="tabs__link" href="#content-2">4 модуль</a>
                          <a class="tabs__link" href="#content-3">5 модуль</a>
                          <a class="tabs__link" href="#content-2">6 модуль</a>
                          <a class="tabs__link" href="#content-3">7 модуль</a>
                          <a class="tabs__link" href="#content-2">8 модуль</a>
                          <a class="tabs__link" href="#content-3">9 модуль</a>
                        </div>
                        <div class="tabs__content">
                          <div class="tabs__pane tabs__pane_show" id="content-1">
                            <h4>Бизнес-идея</h4>
                            <br>
                            <span>генерация идеи, доработка, совершенствование</span>
                          </div>
                          <div class="tabs__pane" id="content-2">
                            Содержимое 2...
                          </div>
                          <div class="tabs__pane" id="content-3">
                            Содержимое 3...
                          </div>
                        </div>
                      </div>

.tabs__items{
    margin-bottom: 60px;
}
  .tabs__nav {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    border-bottom: 1px solid #D1D9DD;
    margin-bottom: 60px;
    padding-bottom: 15px;
    height: 35px;
 
  }
  .tabs__link {
    text-decoration: none;
    font-weight: 300;
    font-size: 16px;
    line-height:35px;
    color: #000;
    padding: 0 15px 0 15px;
    border-right: 1px solid #D1D9DD;
    height: 35px;
  }
  .tabs__link_active {
    border-bottom: 1px solid #E04E39;
    font-weight: 500;
    height: 35px;
    padding-bottom: 15px;
  }
  .tabs__pane {
    display: none;
  }

  .tabs__pane_show {
    display: block;
  }

Answer 1

[Фин Дел]

задаешь .tabs__link

border-right: 1px solid #D1D9DD;
    border-left: 1px solid #D1D9DD;

и убираешь у

.tabs__link:nth-child(1){
      border-right: unset;
    border-left: unset;
}

Comments

[Sergey S19S93]

закопипастил , но не могу понять все равно бордер не отодвинулся

[Фин Дел]

s19s93, то же что и у вас на скрине получается если убираю padding-bottom у .tabs__nav

[Sergey S19S93]

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

[Фин Дел]

s19s93, .tabs__link_active {
border-bottom: 1px solid #E04E39;
font-weight: 500;
height: 35px;
padding-bottom: 15px;
}

[Фин Дел]

s19s93, padding-bottom верни ему

[Фин Дел]

s19s93,
на всякий

[Sergey S19S93]

Спасибо большое ,
Может знаете ещё какими средствами можно реализовать в этой форме , переключение не только нажатием мыши но и кнопками , как в слайдере ?
Кнопки назад и вперёд .

[Фин Дел]

s19s93, всегда рад помочь, насчет кнопок не знаю, но переключение можно реализовать на чистом css с помощью radio вот пример https://codepen.io/Lightislands/pen/QEOxyx

[Sergey S19S93]

Фин Дел, да у меня как раз такая + - реализация . Но нужно еще отдельные кнопки для переключения