Linked Questions

Popular Questions

How to make a parent element expand to the width of its child?

Asked by At

I have a <button></button> element with a nested <span>. The styling of the button uses the :before and :after pseudo selectors:

<div>
  <button type="submit"><span>Submit Form Too Long</span></button>
</div>

However, when I expand the content of the <span>, it just wraps to the next line, without:

  1. Expanding the height of the parent button, thus losing the style as it overflows
  2. It also does not expand the width of the <span>s parent element

Having the option of being able to utilize either of these would be ideal. I have created a codepen example at the following link. The button with content too long is the submit at the top (blue).

https://codepen.io/barrychapman/pen/vbRbwR

What can I do to make this behave the way I want? I suspect the pseudo selectors are causing something funny here.

Related Questions