CSS 指定伪元素：在输入之后

Question

我有无法更改的 html 代码。 我无法使用 JS 寻求帮助。所以唯一的选择是CSS。这里的例子： https://jsfiddle.net/4gKPL/

HTML：

<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>

</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
    <select name="sth" required>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
    </select> <span class="selectedValue">&nbsp;</span>
<span class="is-visually-hidden">select to open the list</span>

</div> <span class="error-message">This is an error message</span>

</div>

CSS：

.complete:after {
    content:'OK';
}

我需要为输入字段显示额外的内容（在本例中为“OK”），而不是为选择。

交互组件后的跨度是可选的，因此不必存在。

知道如何定义这个选择器吗？

Answer 1

由于您不能在input 元素上使用:after，所以我能想到的只是一个非常老套的解决方案：选择后面的元素并在其前面插入一个:before 伪元素。

.complete input[type="text"] + .error-message:before {
    content:'OK';
}

See this jsFiddle 是一个工作示例。

编辑

.error-message 元素并不总是存在，这给这个计划带来了麻烦。您可以对 :before (+ :before) 进行无前缀调用，但是如果以下元素以某种方式隐藏，则您的 OK 消息也会如此。即使它存在，它也会选择跟随元素的样式。见this updated jsFiddle。

我会保留这个想法，以便人们可以看到它，但它看起来不适合你的目的。