Search code examples
htmlcssmargin

Active tab border bottom under the div instead in the div

I have made a tab wrapper with 2 tabs. Under the tabs I have a div with content.

This is my code:

.tab-wrapper {
  width: auto;
  padding-left: 17px;
  background-color: aqua;
  white-space: nowrap;
  display: table-cell;
}

.content {
  background-color: aqua;
}

.role-tab {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-right: 19px;
}

.role-tab>p {
  display: table-cell;
  height: 50px;
  overflow: visible;
  vertical-align: middle;
  width: 100%;
}

.role-tab-active {
  border-bottom: 3px #108DE7 solid;
  font-weight: bold;
}
<div class="tab-wrapper">
  <div class="role-tab role-tab-active">
    <p>Role tab 1</p>
  </div>
  <div class="role-tab">
    <p>Role tab 2</p>
  </div>
</div>
<div class="content">
  <p>Content</p>
</div>

The styling and everything are working good. Now I want to add some padding-top so the border-bottom will go under the div. This is a screenshot what I want:

Screenshot

I want that the border-bottom goes under the div instead of in the div.

I have tried margin-top, padding-top and top, but it didn't work

How can I achieve when the tab is active that the border-bottom goes under the div instead inside it?

Solution

  • just set the margin-bttom: -3px; for the active class and its done :

    .role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}

    see below snippet :

    .tab-wrapper {
    width: auto;
    padding-left: 17px;
    background-color: aqua;
    white-space: nowrap;
    display: table-cell; 
}

.content{    
    background-color: aqua;
}

.role-tab {
    cursor: pointer;
    display: inline-block;
    height: 50px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-right: 19px;
    margin-bottom:-3px;
}

    .role-tab > p {
        display: table-cell;
        height: 50px;
        overflow: visible;
        vertical-align: middle;
        width: 100%;
    }

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}
    <div class="tab-wrapper">
    <div class="role-tab role-tab-active">
        <p>Role tab 1</p>
    </div>
    <div class="role-tab">
        <p>Role tab 2</p>
    </div>
</div>

<div class="content">
<p>Content</p>
</div>