I am using HTML 5, css, Bootstrap 5.

When I have an error message on:

<div class="input-group mb-3">
<span class="input-group-text mb-3">@</span>
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="accountName1"
        name="accountName1" size="40"
        placeholder="[email protected]"
        data-bs-toggle="tooltip" data-bs-placement="top"
        title="Must be a valid email address.">
    <label class="inputError" for="accountName1">Email address</label>
</div>

The error message is displayed over the top of the label (please see attachment).

I found this css:

.error:before {
     content: 'a';
     white-space: pre;
 }

Which works; however, I want to restrict this to my input fields and not select fields as the select fields have the error message displayed under the field.

I tried “input.error:before” and “.inputError.error:before”. Both of these result in the error message being displayed over the top of the label.