I am trying to achieve a specific result: https://i.sstatic.net/1Um2th3L.png
This is how I accomplished it:
<v-tabs>
<v-tab
v-for="(tab, i) in tabs"
:key="i"
v-bind="tab"
></v-tab>
</v-tabs>
<v-divider></v-divider>
However, I want to achieve the same appearance using only CSS without using <v-divider>. I attempted this:
<template>
<v-tabs class="bordered-tab">
<v-tab
v-for="(tab, i) in tabs"
:key="i"
v-bind="tab"
></v-tab>
</v-tabs>
</template>
<style scoped>
.bordered-tab {
border-bottom: 1px solid red;
}
</style>
Here is the result: https://i.sstatic.net/cWn0o5Ng.png
The blue border should appear on top of the red one. How can I achieve this?
Edit #1
Thanks to the insights from @kissu, I was able to reach my desired outcome. Here is the complete code:
<template>
<v-tabs class="bordered-tabs">
<v-tab
v-for="(tab, i) in tabs"
:key="i"
v-bind="tab"
></v-tab>
</v-tabs>
</template>
<style scoped>
.bordered-tabs >>> .v-slide-group__content {
border-bottom: 1px solid #0000001e;
}
</style>
Another thing I would like to do is to apply the style to all .v-slide-group__content elements without explicitly adding a class to them, like so:
.v-slide-group__content {
border-bottom: 1px solid #0000001e;
}
How can I achieve this?
Edit #2
Since I only wanted to apply the above class to horizontal <v-tabs>, I included the following rule in my main.css file:
.v-tabs:not(.v-tabs--vertical) .v-slide-group__content {
border-bottom: 1px solid #0000001e;
}
With this rule, the border-bottom will be applied as follows:
<!-- border-bottom will be applied -->
<v-tabs>
<!-- tabs... -->
</v-tab>
<!-- border-bottom will not be applied -->
<v-tabs direction="vertical">
<!-- tabs... -->
</v-tabs>