用CSS创建星号。星号不在同一个新行中

Question

我想用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>

和CSS SELECTOR :after

.required:after {
    content: "*";
    font-weight: bold;
    color: red;
    margin-left: 6px;
}

现在看起来像

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

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

然后看起来不错

我该怎么办？如何忽略描述TEXT并在图2中添加星号？

Answer 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>

然后，在您的CSS中将.required:after {更改为.required .input-container:after {。

Answer 2

“required”类在包含div上，也许尝试将“required”类移动到输入？

<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>