最后一个跨度中的断线，但可以'；不要更改HTML

想象一下下面的示例性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

样式（或者将两者都包装在一个span中，并执行相同的操作）

我尝试使用

.obr:：after

创建换行符，但由于该元素并不总是存在，并且我不能在输入元素中使用

：：before

，因此我倾向于认为使用内容是不可行的，除非有一种方法可以有条件地放置它（

.lbt:：after

或

.obr:：after

如果存在）。这里有一个解决这个问题的方法

我也尝试了浮动和定位方法，但还没有找到一个适合任何标签或输入大小的好的通用解决方案。 我可以考虑使用jQuery来实现这一点，但是我更希望用CSS。

---

我花了将近两天的时间试图找到一个好的解决方案

标签

和紧挨着的

*

和另一个

在另一行上相邻

    .line
    {
        border: 2px solid black;
        padding: 5px;
        overflow:hidden;
    }

    .line .obr
    {
        color: Red;
        font-weight: bold;
        float:left;
    }

    .lbt
    {
        float:left; 
     }
    .line .obr::after
    {
        content: '\A';
        white-space: pre;
    }
    .inp
    {
        float:left; clear:both;
        margin-top:5px;

    }
    .line span
    {
        float:left;
    }

看看这个：

---

如果希望

旁边的

较低，则添加

页边距顶部：5px
这正是我要找的！我确实尝试过清除：两者都有，但从未使用float:元素中的left！通过一些小的调整，它的工作就像想要的！非常感谢@乔奥西姆斯，不客气！