“如何在列表处于活动状态时为其添加左边框？”

Question

当使用CSS激活列表时，如何在列表中添加左边框？

https://codepen.io/pen/?&editable=true&editors=101

<v-list-group 
  v-for="item in items" 
  :key="item.title" 
  v-model="item.active" 
  :prepend-icon="item.action" 
  no-action>
  <template v-slot:activator>
    <v-list-tile>
      <v-list-tile-content>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </template>

  <v-list-tile 
    v-for="subItem in item.items" 
    :key="subItem.title" 
    @click="">
    <v-list-tile-content>
      <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
    </v-list-tile-content>

    <v-list-tile-action>
      <v-icon>{{ subItem.action }}</v-icon>
    </v-list-tile-action>
  </v-list-tile>
</v-list-group>

Answer 1

.v-list__group--active {
   border-left: 1px solid red
}