css - CSS3：保持 :after 和 :before 元素与元素的高度对齐

Question

我有一个带有标题设计的大头缓存：

这里的演示：http: //jsfiddle.net/uGECm/

这个想法是有一个“包裹”元素的灰色标签；但是，标签的高度是未知的（它可能因内容而异） - 我的问题是，如果标签改变大小，那么像三角形一样的 2 个伪元素会得到错误的位置，这是因为它们的位置是相对的。

任何的想法？

ps：我正在寻找无 js 和无图像的解决方案。

Answer 1

section h2:before, section h2:after {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0 0 -10px 0;
}

section h2:before {
    content: '\0000a0';
    border-left: 10px solid transparent;
    border-top: 10px solid #323232;
}

section h2:after {
    content: '\0000a0';
    border-right: 10px solid transparent;
    border-top: 10px solid #323232;
    right: 0;
}​

这是一个带有一些进一步 CSS 格式的叉子：http: //jsfiddle.net/bqXeJ/

值得看一下我在这里写的风格指南，而且，如果你使用 Lea Verou 的prefixfree.js，你可以跳过为每个浏览器供应商编写声明。

Answer 2

您可以绝对定位伪元素。由于section h2is position: relative，将它们设置为top: 100%将使它们保持在底部，无论父级的大小如何：

section h2:before, section h2:after {
  position: absolute;
  top: 100%;
}

Answer 3

• :before 和 :after 使用绝对位置而不是相对位置
• 适用bottom:-10px;于两者
• 分别应用left:0;和right:0;。
• 取下浮子。浮动对具有绝对位置的元素没有影响。

更新了 jsfiddle 演示。

section h2:before,
section h2:after {
    content: '\0000a0';
    width: 0;
    height: 0;
    position: absolute;    
    bottom: -10px;
    display: block;
}
section h2:before {
    border-left: 10px solid transparent;
    border-top: 10px solid #323232;
    left: 0;
}
section h2:after {
    border-right: 10px solid transparent;
    border-top: 10px solid #323232;
    right: 0;
}