How to add line break after input element with CSS?

Question

I'm consuming a service which returns dynamic HTML with a series of labels and inputs e.g.

input:after {
  content: "\a";
  white-space: pre;
}

<label for="username">Username</label>
<input type="text" id="username" name="username" />

<label for="country">Country</label>
<input type="text" id="country" name="country" />

I want the form to be formatted as follows:

But it does not work. Surrounding the labels and inputs with a div is NOT possible as this is dynamic HTML returned to me by a service.

Any ideas how this can be achieved only through CSS?

Answer 1

Replaced elements including <img>, <object>, <input>, and<textarea> ... do not have :before and :after pseudo-elements.

As a workaround, you could set the line break on the <label> element.

label:before {
    content: "\a";
    white-space: pre;
}

<label for="username">Username</label>
<input type="text" id="username" name="username" />

<label for="country">Country</label>
<input type="text" id="country" name="country" />