tabのマウスホバー時の背景色の高さ変更について

Question

Vuetify.jsを使用してHtml部分を作成しております。
デフォルトだと、タブにマウスホバーしたときに、背景色が変わるのですが、
そのホバーしたときの背景色の高さを変更したいとの依頼をうけました。

下記のようにコードを作成したのですが、タブ内の文字がちょこちょこと動き、
また、height = 10pxとするとバグのような挙動を示します。
不慣れなcssの調整で非常に困っております。
どなたかご教示いただけませんでしょうか？

<div id="app">
  <v-app id="inspire">
    <v-tabs>
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
  </v-app>
</div>

.v-tab:hover {
  height: 40px;
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

Comments

[yambejp]

heightを変えると高さ的にどの位置に来ることを想定していますか？

Answer 1

Vuetifyは疑似要素をつかって背景を指示しているようなので

.v-tab::before {
height:40px;
}

みたいな感じ

Comments

[yambejp]

あとはどの位置に表示したいかによります

[takochan1192]

疑似要素というものがあるのですね。全く知りませんでした。
高さは、ボトムのラインにつかない程度との要望でしたので、現状のままで大丈夫かなと思っております。
かなり調べに調べて：hoverにたどりついて解決した！と思っていましたが、爪が甘かったです。
ご回答いただきまして本当にありがとうございます。