JSは「js-line が見えたら is-active を付ける」だけなので、線の種類が増えてもJS側は一切変更不要です。
<!-- 左→右の仕切り線 -->
<div class="line-x js-line"></div>
<!-- 右→左の仕切り線 -->
<div class="line-x from-right js-line"></div>
<!-- 上→下の縦線（親要素に height が必要） -->
<div style="position: relative; height: 200px;">
<div class="line-y js-line"></div>
</div>
<!-- 下→上の縦線 -->
<div style="position: relative; height: 200px;">
<div class="line-y from-bottom js-line"></div>
</div>
<!-- テキストの下線として使う場合 -->
<h2 style="position: relative; display: inline-block;">
見出しテキスト
<div class="line-x js-line" style="position: absolute; bottom: 0; left: 0;"></div>
</h2>
```
---
## Swellでの実装場所
```
CSS → 外観 → カスタマイズ → 追加CSS
JS → Swell設定 → 高度な設定 → bodyタグ終了前に出力するコード
↑ <script>...</script> で囲んで貼る
ブロック単位で使うなら → カスタムHTMLブロックに
<style>...</style> と <script>...</script> をまとめて貼ってもOK
```
---
## まとめ：拡張の考え方
```
新しい線を追加したくなったら：
1. CSS に新しいクラスを書く（線の形・方向を定義）
2. HTML に js-line クラスを追加する
3. JS はいじらなくていい ← ここが重要