次の例示的な HTML を想像してください。
<form>
<div class="line">
<label class="lbt" for="name">Name:</label>
<span class="obr">*</span>
<input id="name" class="inp" type="text" />
<span class="err">Missing!</span>
</div>
<div class="line">
<label class="lbt" for="area">Area:</label>
<input name="area" class="inp" type="text" />
<span class="suf">m<span style="vertical-align: super;">2</span></span>
<span class="err">Missing!</span>
</div>
</form>
クライアントの要件により、ラベルと必須インジケーターを含むスパンの両方が同じ行にある必要があります。入力と残りのスパンは次の行にあります。必須インジケータはラベル テキストの直後に配置し、他のスパンは入力要素の直後に配置する必要があります。
悲しいことに、HTML コードを変更することはできません。または、義務的な要素をラベル内に配置してdisplay: block
スタイルを使用します (または、両方をスパンでラップして同じことを行います)。
.obr::after
を使用して改行を作成しようとしましたが、この要素は常に存在するとは限らず::before
、入力要素で使用できないため、条件付きで配置する方法がない限り (.lbt::after
または.obr::after
存在する場合)。これは、この問題に関するjsfiddleです。
float と position のアプローチも試しましたが、ラベルや入力サイズに適合する一般的な解決策は見つかりませんでした。これには jQuery の使用を検討するかもしれませんが、CSS のみによるより単純なアプローチを好みます。
良い解決策を見つけるのにほぼ2日かかりました...