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

问题

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

要求

• 我需要设计一个h3标签的样式，以便 在内容后面加下划线/边框
• 此h3将被多次使用 在页面上，以便可以显示内容长度 变化
• 解决方案需要改进 跨浏览器（IE 6/7/8，FF 3& 狩猎旅行）

示例代码

<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:“{uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”}选项不起作用，因为这只是其中一个标记的正确长度
• 我尝试了背景图像，但如果它给了我问题，如果我给它一个大宽度
• 使用文本缩进看不到我想要的效果
• 我尝试了边框底部和文本装饰的组合：没有，但似乎也不起作用

---

任何想法都将不胜感激

尝试将背景图像附加到重复下划线的c类，然后向h3添加背景色以匹配容器的背景。我相信你必须将h3向左浮动，以使宽度塌陷。这有意义吗

.c {
    background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
    margin: 0;
    padding: 0 0 2px 0;
    float: left;
    font-size: 20px;
    background: #ffffff;
}

---

你需要知道文本的宽度，但效果很好。

到目前为止，我唯一想到的解决方案是制作一个PNG或GIF图像，高度为1px，宽度非常大（取决于你的项目，可能类似于1x2000px），然后执行以下操作：

h3#main-title { background: url(line.png) no-repeat bottom XYZem; }

---

其中，以“em”为单位为每个标题手动设置的XYZ。但是，如果不使用JS或添加额外的标记，我无法为这个问题找到一个100%的动态解决方案。

如果类“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的边框部分。

这对我来说很有效

        div.c
        {
        background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
        }
        div.c h3
        {
        height:20px;background-color:white;display:inline;
        }

将div设置为内容的宽度

---

然后将h3的背景设置为页面的背景。这将与整个div的背景图像重叠。您可能希望根据您的图像来调整背景定位

这里有一个更好的答案：

 .c {
    background: url('line.png') repeat-x 0 20px;
 }
 H3 {
    background-color: white;
    display: inline;
    position: relative;
    top: 1px;
 }

使用一个小的，1px高，成对px宽的图像作为下划线，并在H3上用背景色遮挡它

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }

---

您可以在UL标签中填充内容吗？如果是这样，这可能会奏效：

h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }

检查源代码：

---

我也不知道如何控制这一行的结尾。

假设您使用的是动态内容，我建议您最好接受优雅的降级，并使用great_llama和Bohdan Ganicky的混合

想象一下：

A long title that will wrap to two lines___________________ 
and leave you like this in great_llama's solution

如果ul不在ul之前，Bohdan Ganicky的解决方案就不会出现任何问题

解决方案：

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }

---

我们关心IE6，但也承认这是一种美感，IE6用户不会受到影响。如果你不能让设计师接受这一点，也不能修改HTML，那么就做些别的事情（在你找到另一份工作之前）

如果你真的不能编辑标签，我猜答案是否定的，但是你能给这个项目添加javascript代码吗？我也不能添加或更新javascript。。。所以这是不可能的。胡：我更新了这个问题，把这些信息包括进去。谢谢你指出。你的bg图像和大宽度有什么问题吗？IE6，人们仍然在使用它？？这里的问题是，有些东西在不应该的时候会被分成两行…这不需要向下投票-这是对一个棘手问题的合理建议。谢谢史蒂夫。因为这件事被否决了，我对这件事失去了兴趣。有趣的是，仍然没有被接受的答案…对不起，没有完全阅读你的问题-错过了“文本缩进没有给出结果”部分。如果在这个部分添加了页边空白，那么它会起作用，但我试图找到一些比我的答案更好的方法来处理不同长度的多个实例，比如@great_llama的答案，类似的解决方案，但没有图像。此外，rep req的评论干扰了我对本网站的使用。

A long title that will wrap to two lines___________________ 
and leave you like this in great_llama's solution

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }