HTML/CSS: :after pseudo element overflows parent

Question

I have styled some links to look like buttons. These 'buttons' include icons which are added with an icon font using the :after element.

As its a responsive layout, the buttons need to work on multiple screen sizes. When placed inside a flexible container, the:after element overflows it's parent.

Example: The HTML basically looks something like this:

<div class="wrap">
  <a href="/" class="btn icon">Test</a>
</div>

with the following CSS code:

.wrap {
    background: grey;
    width: 20%;
    padding: 20px;
}

.btn {
    display: inline-block;
    padding: 15px;
    background: linear-gradient(to top, #ccc, #fafafa);
    border: 1px solid #999;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.55);
    max-width: 100%;
}

.icon {
    font-family: FontAwesome;
}

.icon:after {
    content: "\f04e";
    margin-left: 8px;
}

and see this Fiddle: http://jsfiddle.net/r6uLJ/

When you narrow the window size, you will see the two triangles (blue) overflow the button (with grey-white gradient). Is there anything I can do to avoid that but still use pseudo-elements for this?

Answer 1

.btn {
    overflow: hidden;
}

Should do the trick.

Answer 2

try this:

* {
  box-sizing: border-box;
}

your thing overflows because of the box model which (the default one) adds the padding on top of the width. so having 100% width is 100% of parent and if you add 15px padding it will overflow 30px when the content wraps on 2 lines...

you might need to prefix it depending on browser, e.g:

-box-sizing: border-box
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Answer 3

If you remove the max-width: 100% rule from the .btn rule set, then the problem does not occur.

See: http://jsfiddle.net/audetwebdesign/r6uLJ/3/