OMGLOLetcetc
New Member
Imagine the following illustrative HTML:\[code\]<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>\[/code\]By client requirement, both the label and the span with the obligatory indicator must be in the same line, being the input and the rest of the spans in the next line.The obligatory indicator must be right after the label text and the other spans right after the input element.Sadly I can't change the HTML code or I would put the obligatory element inside the label and use a \[code\]display: block\[/code\] style (or wrap both in a span and do the same).I tried using the \[code\].obr::after\[/code\] to create a line break but since this element doesn't always exist and I can't use \[code\]::before\[/code\] in an input element so I tend to believe using content isn't feasible unless there's a way to put it conditionally (\[code\].lbt::after\[/code\] or in \[code\].obr::after\[/code\] if exists). Here's a jsfiddle with this problem.I also tried float and positions approaches but haven't found a good generic solution that could fit any label or input size.I may consider using jQuery for this, but I would prefer a simpler approach only by CSS.Been almost two days trying to find a good solution...