【CSS】afterやbeforeで追加した要素がはみ出るときの対処法(left:50%, right:10px;など)｜包含ブロックとは何か？

CSSでは:afterや:beforeで疑似要素をつくって親要素の中に配置することができます。

そのときに位置の指定でleft:50%やright:20%;のようにパーセンテージで表示する位置を指定したい場合があります。

ところが、CSSの設定をきちんとしないと親要素からはみ出してしまいます。ここではその原因と対処法をまとめています。

親要素からはみ出してしまう

afterやbeforeで追加した疑似要素が親要素からはみ出してしまう状態とは例えば以下のように、疑似要素にpostionプロパティを設定して、left:50%;のように位置を％で指定した場合や、right:10px;のようにpxで位置を指定した場合です。

はみ出る実例１（left:50%;）

例えば、以下のようclass=”image-box”にafterで灰色の線を追加します。位置は親要素の真ん中に配置したいのでleft:50%;を指定します。

    /* 親要素 */
    .image-box{
      background: ivory;
      text-align: center;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }

     /* 疑似要素 */
    .image-box:after{
      content: "";
      width: 100px;
      height: 3px;
      background: gray;
      position: absolute;
      left: 50%;
     }

おもいっきり親要素をはみ出しています。

はみ出る実例2（right:10px;）

同じくclass=”image-box”にafterで灰色の線を追加し、位置をright:10px;にしても、親要素からはみ出します。

    /* 親要素 */
    .image-box{
      background: ivory;
      text-align: center;
      padding: 20px;
      margin: 20px;
      width: 200px;
      position: relative;
    }

     /* 疑似要素 */
    .image-box:after{
      content: "";
      width: 100px;
      height: 3px;
      background: gray;
      position: absolute;
      right: 10px;
     }

はみ出る原因

beforeやafterをpostionを使って位置指定したときにはみ出る原因はとても簡単です。

それは以下の２つです。

疑似要素にposition: absolute;を指定している

position: absolute;は絶対的な位置を指定します。親要素からはみ出てしまうのは絶対位置の基準が親要素ではなく画面全体（htmlタグ）になっているためです。

このため、画面の一番左上を(0, 0)として、画面全体のどこに配置するかを指定することになります。

left: 50%;であれば、画面全体の左から50%の位置。right: 10px;であれば、画面全体の右端から10pxの位置となるわけです。

親要素にpositionのfixed, absolute, relative, stickyのいずれかの指定がない

ここで1つ重要なことはposition: absolute;自体は悪くないということです。

むしろ、beforeやafterを使った疑似要素の位置を指定するときに欠かせない絶対に必要なプロパティです。

重要なのは、position: absolute;が何を基準に位置を指定するか？ということです。

position: absolute;はpositionの値がfixed, absolute, relative, sticky（static以外） となっている最も近い祖先要素を基準とします。

つまり、afterやbeforeを設定している親要素でpostionの設定をしていなければ、その上の要素、そこになければその上の要素というように基準の対象が変化していきます。

対処法

対処法はとても簡単です。

親要素にpositionプロパティを設定し値をfixed, absolute, relative, stickyのいずれかにすればOKです（親要素を包含ブロックにする）。

一般的なのは、親要素にposition: relative; を設定することです。

対処法実例１（left:50%;）

例えば、以下のようclass=”image-box”にafterで灰色の線を追加します。位置は親要素の真ん中に配置したいのでleft:50%;を指定した場合です。

    /* 親要素 */
    .image-box{
      background: ivory;
      text-align: center;
      padding: 20px;
      margin: 20px;
      width: 200px;
      position: relative;
    }

     /* 疑似要素 */
    .image-box:after{
      content: "";
      width: 100px;
      height: 3px;
      background: gray;
      position: absolute;
      left: 50%;
     }

きちんと枠内に収まりました。

はみ出る実例2（right:10px;）

同じくclass=”image-box”にafterで灰色の線を追加し、位置をright:10px;にしても、親要素からはみ出します。

    /* 親要素 */
    .image-box{
      background: ivory;
      text-align: center;
      padding: 20px;
      margin: 20px;
      width: 200px;
      position: relative;
    }

     /* 疑似要素 */
    .image-box:after{
      content: "";
      width: 100px;
      height: 3px;
      background: gray;
      position: absolute;
      right: 10px;
     }

指定した通り、親要素に対して右から10pxの位置に配置できています。

以上で完了です。

疑似要素を真ん中（中央寄せ）に配置する方法

上記のようにbeforeやafterで作成した疑似要素を親要素に対して真ん中（中央寄せ）に配置する方法については下記をご参考ください。

【CSS】:beforeや:afterで追加した線（要素）を中央寄せにする方法｜親要素の真ん中に配置する