Question

I trying to add an break before an element in css without changing the underneath html codes. I been searching around this forum for answers, but couldn’t make it work across the different browsers.

HTML ( unchangeable, as it’s part of an joomla component )

    <span id="mod_login_usernametext-map"> <label for="mod_login_username-map"> Email </label> </span>

    <span><input type="text" name="username" id="mod_login_username-map" class="inputbox-map" /></span>

    <-- here i want the break -->

    <span id="mod_login_passwordtext-map"><label for="mod_login_password-map">Password</label></span>&nbsp;<span><input type="password" name="passwd" id="mod_login_password-map" class="inputbox-map" />

    <-- and break here -->
    <input type="checkbox" name="remember" id="mod_login_remember-map" class="inputbox-map" value="yes" /> <span id="mod_login_remembermetext-map"><label for="mod_login_remember-map">Remember me</label></span>

I tried #mod_login_passwordtext-map:before { content: '\A';white-space: pre-line; } but didn’t turn out very well in firefox, chrome fine..

Using display: break doesn’t put the input box on the same level.. Easiest would have been if I just could have added an wrap element around, but no can do that..

Any tips?

Answer 1

Try it with this css:

#mod_login_passwordtext-map:before {
  content: '\A';
  white-space: pre;
}

Demo: codepen

Works well on FF and Chrome for me.

Best regards

EDIT:

This will add a break to your login button too + align the two input fields:

#mod_loginform-map #mod_login_passwordtext-map:before,
#mod_loginform-map .cbLoginButtonSpan:before {
  content: '\A';
  white-space: pre;
}

#mod_login_usernametext-map label,
#mod_login_passwordtext-map label {
  display: inline-block;
  width: 6em;
}

Demo: codepen

EDIT 2:

U cant add :before and :after pseudo classes to input elements.

Why?

Because :before is added before the content of an element and :after is added after the conetent of an element not before or after the element itself.

An input element dont have content, only a value.

Hope this helps.

EDIT 3:

To get a new line, with CSS, for the Remember me input i see only one way.

#mod_loginform-map #mod_login_passwordtext-map:before,
#mod_loginform-map .cbLoginButtonSpan:before,
#mod_loginform-map span:nth-child(4):after {
  content: '\A';
  white-space: pre;
}

Demo: codepen

But this workaround is a bit crappy in my eyes.

Best regards