S
S
s19s932020-04-13 17:21:24
css
s19s93, 2020-04-13 17:21:24

It is not possible to make this form, namely, to move the lower border with the active border, as in the image, can someone tell me?

5e947541dff16913760796.png

<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 the question

In order to leave comments, you need to log in

1 answer(s)
F
Fin Del, 2020-04-13
@s19s93


ask.tabs__link

border-right: 1px solid #D1D9DD;
    border-left: 1px solid #D1D9DD;
and take away
.tabs__link:nth-child(1){
      border-right: unset;
    border-left: unset;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question