My border-bottom is not displayed in Vuetify

Question

I'm developing a website in nuxt.js using Vuetify. I have created a app bar using v-app-bar and I want to add a white line under it. I wanted it because I will put links under the title as extension and I want to seperate them.

I have tried v-divider; however, there is always a space between the divider and bottom line of the app-bar, and I can't set thickness and color of the divider.

<v-app-bar
  color="black"
  app
>
    <v-row>
    <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
    <v-spacer />
    <v-app-bar-title
      class="text-no-wrap text-h3"
      style="width: fit-content;">
      Title
    </v-app-bar-title>
    <v-spacer />
    <v-col
        cols="12"
        class="pb-0 pt-1">
          <v-divider></v-divider>
    </v-col>
    </v-row>
</v-app-bar>

Then I tried it with the bottom border of v-app-bar__content, but border is not displayed. The code:

<template>
    <v-app-bar
    color="black"
    app
    >
    <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
    <v-spacer />
    <v-app-bar-title
      class="text-no-wrap text-h3"
      style="width: fit-content;">
      Title
    </v-app-bar-title>
    <v-spacer />
    </v-app-bar>
</template>

<style>
.v-toolbar__content{
    border-bottom-width: 2px;
    border-color: white;
}
</style>

How could I add a white line exatcly on bottom border of the app-bar__content?

Answer 1

You need to specify the type of the border, hence this should fix your issue

border-bottom: 8px solid white;