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?

@MarcAudet To prevent `.btn` from overflowing it's container. — Sven, Dec 09 '13 at 20:14
In this case, the max-width won't help. In your example, the button's text+icon/content determines the width of the button, and that may be wider than the width of the wrapper, which will cause an overflow condition. You need to think about how the button will behave as the wrapper shrinks in width. There are several ways of designing around this. Can you give some design guidance to help narrow down the solutions? — Marc Audet, Dec 09 '13 at 20:17
@MarcAudet Wow cool – sure! Actually, its only important that the button stays as readable as possible. So actually it would be even possible to remove that icon at some point (although I don't think this is a great solution). You know, there will be many of these icon buttons sitting inside a responsive grid system, but with different words & icons in it. — Sven, Dec 09 '13 at 20:34

score 2 · Answer 1 · answered Dec 09 '13 at 20:04

2

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/

answered Dec 09 '13 at 20:04

Marc Audet

46,011
11
63
83

score 0 · Answer 2 · answered Dec 09 '13 at 19:57

0

.btn {
    overflow: hidden;
}

Should do the trick.

answered Dec 09 '13 at 19:57

Albert Xing

5,620
3
21
40

score 0 · Answer 3 · answered Dec 09 '13 at 20:00

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;

HTML/CSS: :after pseudo element overflows parent

3 Answers3