パーツ番号 07-05-05 ・ CSSのみ

テキスト入り区切り線

左右の罫線の中央に「または」の文字を配置した区切りです。ログインフォームの選択肢の間や、代替手段の提示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-05-wrap">
          <span class="d07-05-05-line"></span>
          <span class="d07-05-05-text">または</span>
          <span class="d07-05-05-line"></span>
        </div>

CSS

.d07-05-05-wrap{ width:100%; max-width:320px; display:flex; align-items:center; gap:16px; }
        .d07-05-05-line{ flex:1; height:1px; background:#ccc; }
        .d07-05-05-text{ flex:0 0 auto; font-size:.85rem; color:#777; letter-spacing:.05em; }

クラス名 .d07-05-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。