Html 用CSS创建星号。星号在新行，不在同一行

我想用CSS创建星号

这是我的代码：

<div class="controls required">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status">1 result is available, use up and down arrow keys to navigate.</span>
<input type="text></input>
<p class="help-block" id="school-description">TEXT</p>
<div>

现在看起来

如果我在输入后删除这部分代码

<p class="help-block" id="school-description">TEXT</p>

文本

那看起来还可以

我能做什么？如何忽略描述文本并像图2中那样放置星号？

如果“必需”类位于包含的div上，可以尝试将“必需”类移动到输入中

<div class="controls">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status">1 result is available, use up and down arrow keys to navigate.</span>
<input type="text" class="required"></input>
<p class="help-block" id="school-description">TEXT</p>
<div>

1如果结果可用，请使用上下箭头键导航。
文本

像这样更改HTML，在输入周围添加一个额外的元素。这是因为输入不能有

：after

伪元素

<div class="controls required">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status">1 result is available, use up and down arrow keys to navigate.</span>
<span class="input-container"><input type="text></input></span>
<p class="help-block" id="school-description">TEXT</p>
<div>

1如果结果可用，请使用上下箭头键导航。
@Vucko-
不能有孩子：（所以也没有伪元素。这是因为你是一个
标记，它是一个块元素。尝试使用
一切都会好起来的。这里有一个wierd解决方法，不改变HTML结构，但我想它会起作用：@misterManSam，你每天都会学到新东西：）将输入包装在
中，并将after伪元素放在该标签上。喜欢如果它需要一个标签，那就是+1，你比我快。我宁愿用。@HashemQolami你是说
文本的标签
？我完全同意这一点，但我想把重点放在实际问题上。对于
输入容器
本身，将其作为一个标签可能具有附加值。我没有，因为它不包含除星号以外的文本。它只是一个额外的辅助工具，能够对它进行样式化，这是很不幸的，因为只有CSS的解决方案会更好，但是如果你从另一个角度来看，将它作为一个标签是有意义的。@GolezTrol-它没有标签吗？在屏幕截图中反正是“Imešole”。是的，我的意思是用它来包装文本（显示在发布的图像中）和输入元素。虽然我没有在演示中添加文本。@先生，你说的截图是对的，尽管我在HTML中没有看到。如果该标签在那里，并且它包含输入（情况并非总是如此），那么您可以使用该标签。
<div class="controls required">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status">1 result is available, use up and down arrow keys to navigate.</span>
<span class="input-container"><input type="text></input></span>
<p class="help-block" id="school-description">TEXT</p>
<div>