本文介绍了如何使用HTML和CSS创建一种视觉效果，通过在标题下方添加一个看似与文本融合的分隔线。这种方法涉及使用容器元素的顶部边框，并通过绝对定位文本来实现。文章强调了边距的重要性，以确保与标题文字协调，并指出该技术适用于纯色背景，否则在非纯色背景下可能导致文本突出。此外，还提到了语义化的考虑，建议用于页面标题而非表单分组。
简单的HTML
Page Title
CSS
.h-line{
border-top:1px solid #ccc;
height:1px;
margin:8px 0 7px 0;
position:relative;
}
.h-line b{
position:absolute;
display:block;
bottom:-8px;
left:32px;
font-size:16px;
padding:0 6px;
background:#FFF;
}
的想法是，对于你的头文件，你只需使用容器元素的边界(即，在这个例子中，H1和我只是选择使用顶部边框)，然后添加另一个标记来包含实际的文本，您可以绝对相对于容器进行定位。
我使用了b标签，因为它在语义上并不重要，因为跨度小但字符少。
我有容器1px的高度，以确保它显示，但它可能没有必要。
一个重要的方面是确保容器具有一定的边距，以便与标题中的文字大小相匹配，或者标题下方/上方的任何内容最终可以重叠标题。
然后，您完成这一步，使b元素的背景与背景颜色相匹配，这将使边框看起来消失在文本后面。
注意：我相信这是字段集和图例标签如何工作，但在语义上更好，如果您使用它的页面标题，而不是表单字段分组。
如果您有非纯色背景，此概念将无法正常工作。这将导致文本“突出显示”背景颜色变得明显并打破了“神奇”效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
