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

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

Смотрите: http://jsfiddle.net/audetwebdesign/r6uLJ/3/

Answer 2

Попробуй это:

* {
  box-sizing: border-box;
}

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

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

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

Answer 3

.btn {
    overflow: hidden;
}

Должен сделать свое дело.