【CSS】テキストの左右に擬似要素で縦線を作る方法

CSS

今回はCSSで「テキストの左右に擬似要素で縦線を作る方法」について解説していきます。

縦線を使っているWEBサイトもあるので、是非理解しておきたいところですね。

【CSS】テキストの左右に擬似要素で縦線を作る方法

完成形はこちら。

それではHTMLとCSSコードを見ていきましょう。

HTML

HTMLコードはこちら。

<ul>
  <li>
    <a href="">HTML</a>
  </li>
  <li>
    <a href="">CSS</a>
  </li>
</ul>

CSS

CSSコードはこちら。

ポイントはaタグのbeforeとafterのコードですね。

ul {
    display: flex;
    justify-content: center;
    list-style: none;
}
ul li a {
    font-size: 14px;
    position: relative;
    margin-right: 30px;
    text-decoration: none;
    color: black;
}
ul li a::before {
    content:"";
    display:inline-block;
    width: 3px;
    height: 40px;
    background-color: black;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}
ul li a::after {
    content:"";
    display:inline-block;
    width: 3px;
    height: 40px;
    background-color: black;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -10px;
}

まとめ

以上が、「テキストの左右に擬似要素で縦線を作る方法」でした。

是非真似してコーディングしてみてください。

 

関連記事:

画像の下に出来る余白の消し方について【WEB制作初心者向け】 【有益】大学生におすすめの本まとめ20選【2020年最新版】 Default ThumbnailYUJIROのプロフィール 【簡単】Photoshopからコーディングする方法【PSD】