• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

テキストの左右に横線(ボーダー)を表示するCSSパーツ

テキストの左右にボーダーを表示するCSS

コピペで使えるパーツのご紹介です。
今回はテキストの左右にボーダーを表示するパーツをご紹介します。

実際のコード

<p class="ttl">テキストの横に線だよ</p>
.ttl {
  & {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 350px;
   margin: 0 auto;
   font-size: 20px;
  }
  &:before, &:after {
    content: "";
    display: block;
    height: 3px;
    background: #000;
    flex-grow: 1;
  }
  &:after {
    margin-right: 12px;
  }
  &:before {
    margin-left: 12px;
  }
}

なお、Sassを利用せずにCSSで作成する場合は以下のとおりです。

.ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  margin: 0 auto;
}

.ttl:before, .ttl:after {
  content: "";
  display: block;
  height: 2px;
  background: #000;
  flex-grow: 1;
}

.ttl:before {
  margin-right: 12px;
}

.ttl:after {
  margin-left: 12px;
}

結果

テキストの横に線だよ

応用編:カスタマイズ

// afterだけに設定すれば、右側にのみボーダーが表示
.ttl {
  & {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 350px;
   margin: 0 auto;
   font-size: 20px;
  }
  &:after {
    content: "";
    display: block;
    height: 3px;
    background: #000;
    flex-grow: 1;
    margin-left: 12px;
  }
}

テキストの右側にだけ横線だよ

実装についての補足

疑似要素であるbeforeafterを使えばかんたんに実装できました。
他にもこれらを利用することで応用できますので、是非色々試してみてください。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND