●マウスオーバーでインデントレベルを表示する

https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20

https://gyazo.com/afec31d5fc3443fd728235273f8f280b

動機

自分で書いていてどこから分岐しているのかわからなくなることがある

読んでいる方は尚更わからないであろうと予想される

しかし、バレットの見た目を派手にしたくない（個人的なこだわり）

挙動

バレットをマウスオーバーするとインデントレベルが横に青字で表示される

スマホの場合はバレットをタップすれば表示される（多分）

備考

位置の設定とかは適当

ご使用になる場合は適宜調節したりもっと良い書き方に変えたりしてください

code:style.css

.line .indent-mark .dot:hover::before {

position: relative;

top: -11px;

right: 18px;

font-weight: 600;

color: blue;

}

.line .indent-mark .c-0 + .dot:hover::before {

content: '1';

}

.line .indent-mark .c-1 + .dot:hover::before {

content: '2';

}

.line .indent-mark .c-2 + .dot:hover::before {

content: '3';

}

.line .indent-mark .c-3 + .dot:hover::before {

content: '4';

}

.line .indent-mark .c-4 + .dot:hover::before {

content: '5';

}

.line .indent-mark .c-5 + .dot:hover::before {

content: '6';

}

.line .indent-mark .c-6 + .dot:hover::before {

content: '7';

}

.line .indent-mark .c-7 + .dot:hover::before {

content: '8';

}