ピン止めとピン止めしてない.page-list-itemの間に線を引く

https://gyazo.com/c8425f0c202da102aaaad67a8c0ab35d

code:style.css

.page-list .grid {

position: relative;

}

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

position: static;

&:before{

content: "";

position: absolute;

width: 100%;

margin-top: -22px;

}

}

li.pin:not(:has(~ li.pin)) {

margin-bottom: 30px;

}

大体こんな感じに描けばいいです

モバイル表示時に調整が必要ならこのプロジェクトのsettingsにあるような感じの書き方をすれば良い

というか混ぜないと意味ないから

以下は自分で解決法見出そうとしてたけど無理だ！てなってウダウダ言ってるやつです

---

難しい点

gridを入れてるcontainerいっぱいの横幅を参照することができない

::beforeなどの疑似要素はそれをつけた要素のwidthしか参照できない

ので、単にwidth:100%とするだけではできない

https://gyazo.com/1aa4d42b3d04434ad584241caff6602a

こうなります

100vwを使ってちょっと値を調整するだけで一旦解決できたっぽい見た目にはなりますが

https://gyazo.com/d11e35535ad7bc1b02fb70a5d4f6d523

vwの仕様上、スクロールバーの幅まで含まれた値なので、ビューポート幅が十分に狭まった場合にキレイになりません

https://gyazo.com/0bc834e4aa6541957909674c95e7b52c

一応そのコードを貼っておきます

code:css

.page-list-item.pin + .page-list-item:not(.pin)::before {

content: "";

position: absolute;

top: -10px;

left: 0;

width: calc(100vw - 16px); /* 8*2 px */

max-width: 1184px; /*1200 - 8*2 px*/

}