【CSS】擬似要素を用いて線を引く方法2019年1月8日Web制作ツイートシェアはてブ送るPocketコーディングをしていると、たまに見出し等に以下のような線がくっついたデザインと出くわすことがあります。HTMLで表現してもいいのですが、今回は擬似要素before,afterを用いてCSSのみで簡単に表現してみます。以下、記事に入ります。まとめ擬似要素を用いた線の引き方まずはHTMLを用意します。今回は簡単に見出しを1行。World!!</h2></div>CSSも少しだけ設定します。見やすくするためのmarginと、font-sizeとfont-weightを適当に。bold;}ページを開くと以下のような見出しができています。ここから線を引いていきましょう。見出しの上に線を引く場合、線は見出しの前に存在することになります。そのため、要素を前に配置するbeforeを使いましょう。beforeを使用してh2の前に線を引いたCSSがコチラ。5px;}ページを開いてみるとこんな感じ。以下、コードの中身について解説します。'';contentはbefore擬似要素とafter擬似要素のみに使えるプロパティです。擬似要素のコンテンツを決めるプロパティで、これがないとbefore,afterに何を設定しても空っぽになってしまいます。‘img/sample.jpg’;と指定します。今回は文字も画像も入れないので、contentの中身は空でOKです。before,afterを使うときは中身は空でもいいので、content自体はとりあえずつけておきましょう。block;今回は上に線を引きたいので、要素を縦並びさせる必要があります。ブロック要素にすると縦並び、インライン要素にすると横並びになるので、今回はdisplay:blockでブロック要素にして縦並びにさせています。28px;backgroundで線の色、heightで線の高さ、widthで線の長さを決めています。ここは引きたい線に応じて適宜調節してください。5px;線と文字の間隔を調整しています。ようにマイナス指定してあげれば近づきます。-10px;を入れるとこんな感じ。下線はh2の後ろに存在するため、今度はafterを使いましょう。5px;}marginの指定がbottomからtopになった点だけ気をつけましょう。上線と同様、左線も見出しの前に存在するコンテンツです。そのためbeforeを使って表現していきます。以下、CSSのコード。6px;}ページを開くと以下の画像のように線が引かれています。inline-block;先ほど説明した通り、ブロック要素は縦並びでインライン要素は横並びです。inline-blockでインライン要素にします。4px;backgroundは線の色で変わらずですが、heightとwidthは上下線のときと関係が入れ替わっています。heightが線の高さ、widthが線の幅になっているので注意。contentとmarginは上下線のときと同様ですね。下線のときと同様、線が見出しの後ろに来るのでafterを使います。6px;}marginの指定がleftに変わった点だけ注意。まとめ今回は線を引くことに焦点を当てましたが、画像やアイコンの設置なんかにも使えます。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。