borderでインデントに縦線を表示するUserCSS
from インデントに縦線を表示するようにした
自動改行や縦に長くなる記法(画像埋め込み等)を入れると線が途切れてしまっていたので、::beforeを使わない方式でも作ったMijinko_SD.icon
参考:/yuiseki/Settings#5fe7114dd7d3c3000084fbf9
線が右寄りになる
https://gyazo.com/25d2f40c00e4b10eb4d7c1310f6257db
code:style2.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #FBE09B; /* 色の指定 */
}
.indent-mark span:nth-child(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #EFA7B1;
}
.indent-mark span:nth-child(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #EAACD8;
}
.indent-mark span:nth-child(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #AEC4E8;
}
.indent-mark span:nth-child(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #97FFF3;
}
.indent-mark span:nth-child(6n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #CBCBCB;
}
background で線を引いてあげると右寄りになるのは防げそうです zk_phi.icon
code:例
background: linear-gradient(to right, var(--page-bg) 40%, #000 40%, var(--page-bg) 50%);