bottom border for active md-tabs__item

[SoumayaMauthoorMOJ]

Is it possible to customise the active md-tabs__item using css, for example adding a bottom border similar to https://design-system.service.gov.uk/get-started/?

I tried the following but it adds a bottom border to all tabs_item:

.md-tabs__item {
  border-bottom: 4px solid;
  border-bottom-color:   #1d70b8;
}

[squidfunk]

#5025 explains how to target the active tab.

[SoumayaMauthoorMOJ]

Hey @squidfunk thanks for the quick response! I did see that answer but it shows how to get the active link not the active item:

.md-tabs__item {
  border-bottom: 4px solid;
  border-bottom-color:   #1d70b8;
}

.md-tabs__link--active {
  border-bottom: 4px solid;
  border-bottom-color:   #1d70b8;
}

[SoumayaMauthoorMOJ]

Would it be possible to modify the tab-item partial so that it has an md-tab__item--active class like for md-nav__item--active:

Happy to raise this as an issue or pull request if you prefer :-)

[squidfunk]

We already have so many CSS classes – I'm not keen on adding even more, since this increases the size of the built site. If you feel that you need the class, please override the tabs-item partial and add it for your installation.

Or wait, why not. We already have it for navigation as well. You can create a PR.

[SoumayaMauthoorMOJ]

Amazing ! I wrote the updated partial in my repo for now and will raise PR this weekend :-)