HTML/CSS : :after pseudo element overflows parent

我已经设计了一些看起来像按钮的链接。这些“按钮”包括使用 :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;
}

然后看看这个 fiddle :http://jsfiddle.net/r6uLJ/

当您缩小窗口尺寸时，您会看到两个三 Angular 形(蓝色)溢出按钮(带有灰白色渐变)。我可以做些什么来避免这种情况，但仍然为此使用伪元素吗？

最佳答案

如果从 .btn 规则集中删除 max-width: 100% 规则，则不会出现该问题。

参见:http://jsfiddle.net/audetwebdesign/r6uLJ/3/

关于HTML/CSS : :after pseudo element overflows parent，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20479456/