I have a
<button></button> element with a nested
<span>. The styling of the button uses the
: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:
- Expanding the height of the parent button, thus losing the style as it overflows
- 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).
What can I do to make this behave the way I want? I suspect the pseudo selectors are causing something funny here.