[Vuejs]-How to draw a dotted "L" shapped line, When accordion is open?

To get layout like:

Just add to your:

<div
  v-for="accordion in accordions"
  :key="accordion.title"
  :class="{
    green: accordion.text === 'AllaboutVue',
    red: accordion.textwo === 'hi',
    red: accordion.text === 'AllaboutNuxt',
    pink: accordion.text === 'Allaboutwebpack',
  }"
>

class, for example, line:

<div
  v-for="accordion in accordions"
  :key="accordion.title"
  class="line"
  :class="{
    green: accordion.text === 'AllaboutVue',
    red: accordion.textwo === 'hi',
    red: accordion.text === 'AllaboutNuxt',
    pink: accordion.text === 'Allaboutwebpack',
  }"
>

Then add some styles:

.line >>> .content > div {
  --line-width: 2px;
  --x-offset: 8px;
  --x-width: 120px;

  position: relative;
  padding-bottom: var(--line-width);
}
.line >>> .content > div:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--x-offset);
  width: var(--x-width);
  height: 100%;
  border-left: var(--line-width) dashed currentColor;
  border-bottom: var(--line-width) dashed currentColor;
}
.line >>> .content > div:after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--line-width) * 1.75);
  left: calc(var(--x-offset) + var(--x-width));
  width: 0;
  height: 0;
  border: calc(var(--line-width) * 2.5) solid transparent;
  border-right: 0;
  border-left: calc(var(--line-width) * 5) solid currentColor;
}