疑似要素を含めて中央寄せできるのか

Question

タイトルのままなのですが、疑似要素を含めた上で中央寄せができるのでしょうか？

after疑似要素で作ったチェックボックスの幅とそれ以下の文章の幅を加味した横幅をもって、画面中央（中央寄せ）に持っていきたいのですが
やはり疑似要素で作らず、ちゃんとしたタグをもってコーディングした方が良いのでしょうか？

コードは以下の通りです。（実装中途＆コード汚いですがご了承ください）⇓

        <li class="checkbox-list">
          <label><input class="checkbox" type="checkbox"><span><a>プライバシーポリシー</a>に合意する</span></label>
        </li>

.checkbox-list {
  text-align: center;
  label {
    display: block;
    width: 100%;
    input {
      display: none;
    }
    span {
      font-size: 1.6rem;
      font-weight: normal;
      cursor: pointer;
      display: inline-block;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -40px;
        display: block;
        width: 28px;
        height: 28px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.16);
        border-radius: 2px;
        transform: translateY(-50%);
      }
      a {
        color: #000;
        text-decoration: underline;
      }
    }
  }
}

ご回答いただければ幸いです。

Answer 1

before疑似要素を left: -40px; でspanブロックの外に出しているのが、その分画面中央からずれます。これは left: 0; にして、spanブロックに padding-left: 40px; を付加して疑似チェックボックスと重ならないようにすれば、うまく中央に配置されます。

.checkbox-list {
  text-align: center;
  label {
    display: block;
    width: 100%;
    input {
      display: none;
    }
    span {
      font-size: 1.6rem;
      font-weight: normal;
      cursor: pointer;
      display: inline-block;
      position: relative;
      padding-left: 40px; /*追加*/
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;          /*修正*/
        display: block;
        width: 28px;
        height: 28px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.16);
        border-radius: 2px;
        transform: translateY(-50%);
      }
      a {
        color: #000;
        text-decoration: underline;
      }
    }
  }
}

蛇足

疑似チェックボックスの配置ですが、現状は position: absolute; と transform で位置決めしてますが、flex を使うとシンプルにできます。

    span {
      font-size: 1.6rem;
      font-weight: normal;
      cursor: pointer;
      display: inline-flex; /*横並び*/
      align-items: center; /*垂直位置中央配置*/
      &::before {
        content: "";
        width: 28px;
        height: 28px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.16);
        border-radius: 2px;
        margin-right: 10px; /*a要素との間隔調整*/
      }

Comments

[NDvP2OWLAoccEfQ]

本日は2回目のご回答本当にありがとうございます！
position(relative)プロパティはpaddingを基準に取るんでしたね！
ありがとうございます。

[NDvP2OWLAoccEfQ]

蛇足までありがとうございます！
時間があればでよろしいのですが
チェックマークをつけるにあたって疑似要素afterを使用しているのですが
やはりそのときにpositionが必要になってくるのではないのでしょうか？
&::after {
content: "";
position: absolute;
top: 10px;
left: 5px;
transform: translateY(-50%) rotate(-45deg);
width: 1em;
height: 0.6em;
border-bottom: 3px solid rgba(0, 0, 0, 0.32);
border-left: 3px solid rgba(0, 0, 0, 0.32);
opacity: 0;
transition: all 0.3s ease 0s;
}

[hatena19]

チェックマークはボックス(before疑似要素) に重ねる必要がありますので、position: absolute; は必要になりますね。

[NDvP2OWLAoccEfQ]

ですよね！ご回答ありがとうございます。

Answer 2

ご協力いただきありがとうございます。 回避策をたくさん探しましたが、今までこの投稿を見つけました。 この記事を知ることができたのも全てmr mineのおかげです。