【CSS】擬似要素で点線を引く方法

CSS

今回は「擬似要素で点線を引く方法」について紹介します。

【CSS】擬似要素で点線を引く方法

完成形はこちら。

それでは作っていきましょう！

HTML

<p>テキストが入ります</p>

CSS

p {
    position: relative;
    text-align: center;
    font-size: 20px;
}
p::after {
    border-bottom: 3px dotted pink;
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
}

まずはpタグに対して「position: relative;」を指定します。

そしてpタグのafter、つまりテキストの下に擬似要素を作っていきます。

ポイントは「border-bottom: 3px dotted pink;」で点線を指定することですね。

まとめ

以上が、「擬似要素で点線を引く方法」でした。

 

関連記事:

【有益】大学生におすすめの本まとめ20選【2020年最新版】 【簡単】マクドナルドで使える無料の裏技15個【まとめてみた】 大学生活でやるべきこと、やって良かったこと10選 【JS】固定headerを一定間スクロールしたら背景色を変える方法