html - CSS 在标题内容后添加下划线

Question

问题

我正在做一个网站主题元素，但不允许我更改 HTML 或 JavaScript。我只能更新 CSS 样式表和添加/更新图像。

要求

• 我需要设计一个 h3 标签的样式内容后的下划线/边框。
• 这个h3会被多次使用在页面上，所以内容长度可以变化
• 解决方案需要跨浏览器 (IE 6/7/8, FF 3, & Safari )

示例代码

<div class="a">
   <div class="b"><!-- etc --></div>
   <div class="c">
      <h3>Sample Text To Have Line Afterwards</h3>
      <ul><!-- etc --></ul>
      <p class="d"><!-- etc --></p>
   </div>
</div>

示例输出

Sample Text to Have Line Afterwards ______________________________________Another Example __________________________________________________________And Yet Another Example __________________________________________________

注意事项

• 我认为#sample:after { content: "__________"; } 选项不起作用，因为这只是其中一个标签的正确长度
• 我尝试了一张背景图片，但如果我给它一张宽度较大的图片，它会给我带来问题
• 使用文本缩进并没有给我想要的效果
• 我尝试了 border-bottom 和 text-decoration: none 的组合，但这似乎也不起作用

如有任何想法，我们将不胜感激!

Answer 1

如果类“c”始终是 h3 的父类，这将起作用...

.c {
    position: relative;
    margin-top: 25px;
    border-top: 1px solid #000;
    padding: 0px;
}
h3 {
    font-size:20px;
    margin-top: 0px;
    position: absolute;
    top: -18px;
    background: #fff;
}

它让容器有边框，然后使用绝对定位将 h3 移到它上面，背景颜色让它遮住它覆盖的 c 边框部分。