SIMこんにちは、SIMです。
今回は、疑似要素::beforeと::afterの使い方を分かりやすく紹介します。
まず、疑似要素「::beforeと::after」って何なのか？について、簡単な使用例をお見せします。
下のCodePenではピンク色がbefore、ブルーがafterで付けた文字です。
See the Pen before&after表示位置デフォルト by Satoru Shimizu (@sat-simizu) on CodePen.
SIMということで、解説していきます。
疑似要素::beforeと::afterの基本テンプレ
SIM最初に一番基本的なテンプレから紹介します。
表示位置を変えない時の::beforeと::afterの使い方（初期設定）
SIMまず、beforeとafterの表示位置を変えない、いわゆる初期状態から説明していきます。
下のCodePenが完成品ですが、ザックリと要素の説明をまとめておくと次のようになります。
- 「豚肉７割引」（黒文字）：HTMLにのみ書かれている
- 超特価！（ピンク文字）：「::before」でCSSのみに書かれている｜「::before」の初期表示位置は要素の直前
- 本日限り（青文字）：「::after」でCSSのみに書かれている｜「::after」の初期表示位置は要素の直後
See the Pen before&after表示位置デフォルト by Satoru Shimizu (@sat-simizu) on CodePen.
HTMLの説明
SIMHTMLに書いた文字列は、「豚肉７割引」のみで、この文字列の前後を擬似要素のbeforeとafterで装飾しています。
<p class="sale-p">「豚肉７割引」</p>わざわざ疑似要素を使わなくても「HTMLに直接書けばいいじゃん！」と思われる人も多いでしょうが、HTMLに装飾文字を加えるとなると、さらにタグで区切ったり、新しいclass名を付けたりと手間が増えるんですよね。
その点beforeやafterを使えば、HTMLを変更せずにCSSにちょっと追記するだけで、かなり自由度の高い装飾ができるようになるのがメリットです。
CSSの説明
SIMCSSの書き方ですが、下にコードの抜粋を貼っておきます。
/* beforeとafterで装飾する文字列 */
.sale-p{
text-align: center;
font-size: 16px;
}
/* beforeの設定 */
.sale-p::before{
content: "超特価！";
color: #f72585;
}
/* afterの設定 */
.sale-p::after{
content: "本日限り";
color: #3f37c9;
}要素（普通はclass名で指定）::before（またはafter）{
content: “加えたい文字列“;
以下に「加えたい文字列」のスタイルを記述（上の例では文字色を指定しています）
}
表示位置を変えたい時の::beforeと::afterの使い方
SIMbeforeとafterはデフォルトでは表示位置が決まっていますが、設定で変えられます。
実際は変えて使う方が多いです。
ということで、上の例を改造して、beforeとafterの表示位置を変えたものを下のCodePenに置いておきます。
See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.
SIMでは、疑似要素「beforeとafter」の表示位置の変え方を説明していきます。
- 元になる要素（上の例では「豚肉７割引」）：「position: relative;」を設定
- 疑似要素(beforeとafter)：「position: absolute;」を設定し、top/bottom/left/rightなどで位置をピクセル単位で指定する。
SIMちなみに、上の例ではCSSを変えただけです。
コードは下のとおり。
/* beforeとafterで装飾する文字列 */
.sale-p {
width: 250px;
margin: 0 auto;
text-align: center;
font-size: 16px;
position: relative;
}
/* beforeの設定 */
.sale-p::before {
content: "超特価！";
position: absolute;
right: 0;
color: #f72585;
}
/* afterの設定 */
.sale-p::after {
content: "本日限り";
position: absolute;
left: 0;
color: #3f37c9;
}上の例では、leftとrightで表示位置を指定しています。
少し補足すると、「超特価！」は元の要素「豚肉７割引」のpタグの右端から0pxの位置に表示するように「right:0」を指定、同じく、「本日限り」は「豚肉７割引」のpタグの左端から0pxの位置に表示するように「left:0」を指定しているわけです。
なお、表示位置は「豚肉７割引」のpタグのwidthに依存するので、上の例では「width: 250px;」で幅を決めています。この数字を変えると疑似要素の表示位置も変わるので注意して下さい。
メニュー項目をbeforeとafterで装飾する（アイコン画像付き）
SIMでは、この疑似要素で頻繁に見かけるパターンの一つとして、メニュー項目の後ろに矢印アイコンが付くパターンを紹介します。
メニュー項目の後ろにアイコン画像（画像ファイル読み込み）を付ける
SIMまずは簡単な矢印画像を擬似要素として読み込むパターン。
下のCodePenでは擬似要素に「::before」を使っていますが「::after」も全く同じことができます。
See the Pen before&afterリスト後ろに画像矢印 by s sim (@s-sim) on CodePen.
HTMLについて説明
SIMメニューということで、ulとliタグで作ってます。
divタグ等でも同じことができますので、お好みで選んで下さい。
<h2 class="menu-h2">定食メニュー</h2>
<ul class="menu_ul">
<li class="menu_li">
<a href="#" class="li-a">唐揚げ定食</a>
</li>
<li class="menu_li">
<a href="#" class="li-a">とんかつ定食</a>
</li>
<li class="menu_li">
<a href="#" class="li-a">ハンバーグ定食</a>
</li>
</ul>たぶん、メニューをHTMLで書く場合には上のがもっともシンプルなコードになります。
CSSの疑似要素（::beforeと::after）の書き方｜画像の場合
SIM疑似要素（::before）に直接関係する箇所を抜粋したのが下のコードです。
/* aタグの書式 */
.li-a {
position: relative;
display: inline-block;
padding-right: 2em;
padding-left: 1em;
width: 100%;
height: 100%;
display: flex;
align-items: center;
background-color: rgba(46, 101, 219, 0.1);
}
/* 疑似要素beforeの設定 */
.li-a::before {
content: "";
position: absolute;
display: inline-block;
background-image: url(https://drive.google.com/uc?export=view&id=1IAc9PHNlBW-FmszLn3hbfLXMGwQqd1CW);
height: 18px;
width: 18px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
right: 1em;
top: 50%;
transform: translateY(-50%);
}上の疑似要素（::before）解説を箇条書きで書き出すと、次のようになります。
- 元の要素（上の例では「li-a」タグ）：「position: relative;」に設定
- 疑似要素（上の例では「.li-a::before」）：「position: absolute;」
- 疑似要素：「display: inline-block;」：バグりにくくなる（無くても良い）
- 疑似要素で画像の読み込み：「background-image」で画像ファイルへのパスを書く
- 画像サイズ設定：heightとwidthでピクセル単位で指定
- 画像表示範囲：「background-size: contain;」で画像が欠けることなく、全体が表示されるように設定
- 繰り返し表示：「background-repeat: no-repeat;」で画像の繰り返し表示を禁止する
- 鉛直方向の表示位置：「vertical-align: middle;」で真ん中指定／通常これだけでは真ん中にならない
- 画像の水平方向の位置：「right: 1em;」で元の要素の右端から１文字分の位置に指定（好みで変える）
- 画像の鉛直方向の位置：「top: 50%;」と「transform: translateY(-50%);」でちょうど真ん中に移動させる
メニュー項目の後ろにアイコン画像（CSSで自作）を付ける
SIM擬似要素でメニュー項目の後ろに付けるマークは、画像を読み込まずにCSSで書くこともできます。
下記のCodePenでご確認下さい。
See the Pen before&afterリスト後ろにCSS矢印 by Satoru Shimizu (@sat-simizu) on CodePen.
SIMコードの説明ですが、HTMLは共通なので省略して、CSSの解説をしていきます。
CSSで擬似要素の矢印マークを書く方法
SIMザックリ説明すると、beforeで円形の外枠を書いて、afterで内側の矢印マークを書いてます。
下に関係する箇所のCSSを抜粋しました。
/* aタグの書式 */
.li-a {
position: relative;
display: inline-block;
padding-right: 2em;
padding-left: 1em;
width: 100%;
height: 100%;
display: flex;
align-items: center;
background-color: rgba(46, 101, 219, 0.1);
}
/* beforeの設定 */
.li-a::before {
content: "";
position: absolute;
display: inline-block;
border: 1.5px solid #333333;
border-radius: 50%;
height: 18px;
width: 18px;
right: 1em;
top: 50%;
transform: translateY(-50%);
}
/* beforeの設定 */
.li-a::after {
content: "";
position: absolute;
display: inline-block;
border-top: 1.5px solid #333333;
border-right: 1.5px solid #333333;
height: 6px;
width: 6px;
right: 23px;
transform: rotate(45deg);
}コードを見ただけでは分かりにくいと思うので、CSSの書き方を箇条書きで解説します。
::beforeで円形を書く
- 線のスタイル：「border: 1.5px solid #333333;」のように線の太さや色を設定
- 円にする：そのままだと四角形になってしまうので、「border-radius: 50%;」で円形する
- 円のサイズ：heightとwidthで好みの大きさに設定
- 円の水平位置：「right: 1em;」のように位置決めする（この場合は右端から1文字分の位置）
- 円の鉛直位置：「top: 50%;」と「transform: translateY(-50%);」で上下真ん中に設定
::afterで矢印を書く（要約：borderで正方形の辺２つを45度回転させて作る）
- 矢印の原型：「border-top」と「border-right」で正方形の隣り合う辺２つを作る
- 矢印回転：「transform: rotate(45deg);」で辺２つを45度回転させて矢印の向きを調整
- 矢印のサイズ：「height」と「width」でちょうど良い大きさに調整
- 矢印の位置：right/left/top/bottomなどで自然に見える位置に調整する
SIM矢印の形状・サイズ・色の変更が画像読み込みより速いので、こっちの方法がオススメです。
リストをbeforeとafterで装飾する（list-style-typeを変える）
SIM次に疑似要素（::beforeと::after） でよく使うパターンとして、リスト表示のマーク（デフォルでは点）を画像などに変える方法。
list-style-typeを好みの画像（画像ファイル読み込み）に変える
SIM方法は、メニュー項目の場合とほぼ同じです。
デフォルトのリストマークを消して、疑似要素で読み込むリストマークをリスト項目の前側に配置するだけです。
下にCodePenを置いておきますので、表示とコードの確認に使ってください。
See the Pen before&afterリスト前に画像 by s sim (@s-sim) on CodePen.
HTMLの構造
SIMリスト表示の場合にはリンクを貼らなくても良いので、aタグを消してシンプルにしました。
<h2 class="menu-h2">定食メニュー</h2>
<ul class="menu_ul">
<li class="menu_li">唐揚げ定食</li>
<li class="menu_li">とんかつ定食</li>
<li class="menu_li">ハンバーグ定食</li>
</ul>疑似要素（:before）でCSSにリストマーク（list-style-type）画像を読み込む方法
SIMCSSはさっきよりは少し複雑ですが、基本の考え方は同じです。
メニュー項目が作れる人は難なくクリアできます。
関係箇所のCSS抜粋は次のとおりです。
/* デフォルトのリストスタイルの消去 */
.menu_ul{
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
/* リストliタグの書式 */
.menu_li {
position: relative;
display: inline-block;
padding-left: 2em;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
/* リストliタグのbefore設定 */
.menu_li::before {
content: "";
position: absolute;
display: inline-block;
background-image: url(https://drive.google.com/uc?export=view&id=1IAc9PHNlBW-FmszLn3hbfLXMGwQqd1CW);
height: 18px;
width: 18px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
left: 0;
top: 50%;
transform: translateY(-50%);
}疑似要素の書き方の要点を箇条書きでまとめておきます。
デフォルトのリストスタイルの消去
- リセットCSSにdestyle CSSを使っている人はここの操作は不要です。そうじゃない人は下の操作を実施して下さい。
- ulタグのスタイルをリセット：ulタグに対して「list-style-type: none;」でデフォルトリストマークを消去、必要に応じて「padding-left: 0;」や「margin-left: 0;」でデフォルトの余白設定も無効化して下さい。
liタグの余白設定
- 左側の余白：「padding-left: 2em;」のように少し空けて下さい。この場合は左側に２文字分の余白を確保しました。この余白に擬似要素のリストマークが入る予定です。
- 上下中央寄せ：liタグを上下中央寄せに配置しておく。「display: flex;」「align-items: center;」で実現できます。
疑似要素（::beforeまたは::after）でリストマーク画像を読み込む
- ここはメニュー項目の説明とほぼ同じです。
- 違う箇所は、疑似要素の配置位置が「right:0」から「left:0」に変わっただけです。つまり右端から左端に変わっただけです。
list-style-typeを好みの画像（CSSで作る）に変える
SIMここもメニュー項目の説明とほぼ同じになります。
表示場所が右端から左端に変わっただけす。
ということで、説明は省略してCodePenとコードだけ置いておきます。
See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.
SIMHTMLは共通なので、CSSだけ関係箇所を抜粋しておきます。
/* デフォルトのリストスタイルの消去 */
.menu_ul{
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
/* リストliタグの書式 */
.menu_li {
position: relative;
display: inline-block;
padding-left: 2em;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
/* beforeの設定（円形） */
.menu_li::before {
content: "";
position: absolute;
display: inline-block;
border: 1.5px solid #333333;
border-radius: 50%;
height: 18px;
width: 18px;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* afterの設定（内側の矢印） */
.menu_li::after {
content: "";
position: absolute;
display: inline-block;
border-top: 1.5px solid #333333;
border-right: 1.5px solid #333333;
height: 6px;
width: 6px;
left: 5px;
top: ;
transform: rotate(45deg);
}見出しを::beforeと::afterで装飾する（あしらい）
SIM疑似要素（::beforeと::after）は見出しの装飾（あしらい）にも良く使われます。
ここでは、頻出パターンを数例紹介していきます。
見出しに２色のアンダーライン（途中で色が変わるタイプ）
SIMまずは２色アンダーラインの見出しスタイル
See the Pen 疑似要素｜見出しデザイン｜二色アンダーライン｜before&after by Satoru Shimizu (@sat-simizu) on CodePen.
HTMLの構造
SIMHTMLは特に説明することはありません。
なんの変哲のないhタグです。
<h2 class="headline-h2">見出しデザイン</h2>CSSの書き方
SIMCSSの関係箇所の抜粋は次のとおり
.headline-h2{
position: relative;
font-size: 24px;
font-weight: 600;
padding-bottom: 0.2em;
border-bottom: 5px solid #ccc;
}
.headline-h2::before {
content: " ";
position: absolute;
display: inline-block;
border-bottom: solid 5px #3a86ff;
bottom: -5px;
width: 25%;
}h2タグのグレーの線に、h2タグの疑似要素（::before）の青い短い線を重ねているだけです。
両方とも「border-bottom」で線を書いています。
見出し前に画像を付ける
SIM見出し前に画像を疑似要素（::beforeや::after）で付けるパータンもよく目にします。
今回は画像を読み込むのではなく、CSSで書くパターンを紹介します。
See the Pen 疑似要素｜見出しデザイン｜二色アンダーライン｜before&after by Satoru Shimizu (@sat-simizu) on CodePen.
SIMCSSコードの抜粋は下記のとおりで、すべて上の解説の応用です。
.headline-h2{
position: relative;
font-size: 24px;
font-weight: 600;
padding-left: 1.5em;
}
.headline-h2::before {
content: " ";
position: absolute;
display: inlihe-block;
background-color: rgba(46, 101, 219);
height: 24px;
width: 24px;
left: 0;
top: 50%;
transform: translateY(-50%);
}見出しの上に飾り文字を付ける
SIM次もよく見るパターンで、見出しの上に文字装飾を付けるパターン。
この例では、見出し「会社情報について」の上に擬似要素で「COMPANY」の飾り文字を薄いグレーで入れてます。
See the Pen 疑似要素｜見出しデザイン｜上に飾り文字｜before&after by Satoru Shimizu (@sat-simizu) on CodePen.
SIMHTMLは次のとおりで、構造自体は前のと同じ。
<h2 class="headline-h2">会社情報について</h2>関係箇所のCSSコードは次のとおり。
.headline-h2{
position: relative;
font-size: 24px;
font-weight: 600;
color: #333;
}
.headline-h2::before {
content: "COMPANY ";
position: absolute;
display: inlihe-block;
color: #bcbcbc;
font-size: 18px;
font-weight: 300;
top: -1.2em;
}見出しの裏側に飾り文字を重ねる
SIMこれもよく見るパターンの見出しに、疑似要素の飾り文字を裏側から重ねるパターン。
See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.
SIMHTMLはさっきと共通なので説明は省略。
CSSは下のとおり。
ポイントは、疑似要素の飾り文字はz-index; -1;に設定することで見出しの裏側に配置している点です。
.headline-h2{
position: relative;
font-size: 24px;
font-weight: 600;
color: #333;
}
.headline-h2::before {
content: "COMPANY ";
position: absolute;
display: inlihe-block;
color: #ddd;
font-size: 46px;
font-weight: 900;
top: -0.9em;
z-index:-1;
}見出しをbeforeとafterで装飾する（蛍光ペンのマーカー風）
SIM最後に蛍光ペンのマーカー風の見出しを疑似要素で作るパターン。
見出しだけではなく、普通の段落にも使えます。
そのCodePenを下に置いておきます。
See the Pen CodePen Home 疑似要素｜見出しデザイン｜マーカー風｜before&after by Satoru Shimizu (@sat-simizu) on CodePen.
SIMCSSの抜粋を下に貼っておきます。
考え方としては、上のアンダーラインタイプと後ろに重ねるタイプの合わせ技です。
.headline-h2{
position: relative;
font-size: 24px;
font-weight: 600;
color: #333;
}
.headline-h2::before {
content: " ";
position: absolute;
display: inlihe-block;
border-bottom: solid 12px rgba(46, 101, 219, 0.3);
bottom: 0.3em;
width: 100%;
z-index: -1;
}まとめ
SIM今回紹介したのは文字情報の装飾ですが、セクション全体の装飾にも応用できるので疑似要素は慣れると非常に便利です。
以上、簡単ですが、疑似要素（::beforeと::after）を使った文字列の装飾方法の紹介でした。
