CSSグリッドのグリッドアイテムのように動作する擬似要素

Question

フィールドを必要とするフォームを作成しています。これらを必要に応じてマークするには、アスタリスク（*）を::before要素に置き、フィールドの右上隅にあるように右に浮動させます。

これらのフィールドのいくつかはCSSグリッドに配置されており、グリッドに::before要素を追加すると、別のグリッドアイテムとして扱われ、すべてが新しいグリッド行にプッシュされます。

CSSグリッドが::before要素を別のグリッド項目として扱うのはなぜですか？どのようにアスタリスクを入力要素のように配置するのですか？ここで

は、基本的なHTML/CSSです：

html { 
 
    width: 75%; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
input { 
 
    width: 100% 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: .33fr .33fr .33fr; 
 
} 
 

 
li.required::before { 
 
    content: '*'; 
 
    float: right; 
 
    font-size: 15px; 
 
}

<ul> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
    <li class="grid required"> 
 
    <p>one</p> 
 
    <p>two</p> 
 
    <p>three</p> 
 
    </li> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
</ul>

ここでフィドルです：https://jsfiddle.net/zbqucvt9/

Answer 1

擬似要素は、グリッドコンテナ（just like in a flex container）に子要素と考えられています。したがって、グリッド項目の特性を利用します。

文書フローから絶対位置付けを使用して、グリッド項目をいつでも削除できます。その後、CSSオフセットプロパティ（left、right、top、bottom）を使用してそれらを移動します。

ここで基本的な例は次のとおり

html { 
 
    width: 75%; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
input { 
 
    width: 100% 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
} 
 

 
li { 
 
    position: relative; 
 
} 
 

 
li.required::after { 
 
    content: '*'; 
 
    font-size: 15px; 
 
    color: red; 
 
    position: absolute; 
 
    right: -15px; 
 
    top: -15px; 
 
}

<ul> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
    <li class="grid required"> 
 
    <p>one</p> 
 
    <p>two</p> 
 
    <p>three</p> 
 
    </li> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
</ul>