HTML/CSS:: после переполнения псевдоэлементов родительский

Question

Я создал несколько ссылок, похожих на кнопки. Эти «кнопки» включают значки, которые добавляются шрифтом значка, используя элемент :after.

В качестве отзывчивого макета кнопки должны работать на нескольких размерах экрана. При размещении внутри гибкого контейнера элемент :after переполняет его родительский.

Пример: HTML, в основном выглядит примерно так:

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

со следующим кодом CSS:

.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; 
} 

и увидеть эту скрипку: http://jsfiddle.net/r6uLJ/

Когда вы сужать размер окна, вы увидите, что два треугольника (синий) переполняют кнопку (с серо-белый градиент). Есть ли что-нибудь, что я могу сделать, чтобы избежать этого, но все же использовать псевдоэлементы для этого?

Answer 1

.btn { 
    overflow: hidden; 
} 

Должен сделать трюк.

Answer 2

попробовать это:

* { 
    box-sizing: border-box; 
} 

ваша вещь перетекает из блочной модели, которая (по умолчанию один) добавляет отступы сверху ширины. поэтому иметь ширину 100% составляет 100% от родителей и если добавить 15px отступы будет переполнение 30px когда содержание обертывания на 2 линии ...

вам может понадобиться префикс его в зависимости от браузера, например:

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

Answer 3

Если вы удалите правило max-width: 100% из набора правил .btn, проблема не возникает.

См: http://jsfiddle.net/audetwebdesign/r6uLJ/3/