Question

问题

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

Requrements

我需要为h3标签设置样式内容后加下划线/边框。
这个h3将被多次使用在页面上，所以conent长度可以变化
解决方案需要跨浏览器（IE 6/7/8，FF 3，＆amp; 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：“__________”; }选项不起作用，因为那只是其中一个标签的正确长度
我尝试了一个背景图片，但是如果我给它带来了问题，如果我给它一个宽度大的
使用text-indent看不到给我效果我正在寻找
我尝试了border-bottom和text-decoration的组合：none，但这似乎不起作用

我们非常感谢任何想法！

Answer 1

尝试将背景图像附加到重复下划线的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;
}

Answer 2

如果类'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边界部分。

Answer 3

.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 */ }

http://besh.dwich.cz/tmp/h3.html

Answer 4

 H3 {
    border: 1px solid red;
    border-width: 0 0 1px 0;
    text-indent: -60px;
 }

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

Answer 5

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

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

您为每个标题手动设置的XYZ，以'em'为单位。但是，如果不使用JS或添加额外的标记，我无法找到100％的动态解决方案。

Answer 6

这对我有用

        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的背景图像重叠。您可能希望根据图像使用背景定位

Answer 7

这是一个更好的答案：

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

使用一个小的1px高度，偶数px宽的图像作为下划线，并用H3上的背景颜色遮挡它。

Answer 8

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

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

Answer 9

检查源代码：http://nonlinear.cc/lab/friends/elijahmanor.html

然后我再也没有IDEA如何控制线的终点。

Answer 10

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

想象：

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

没有任何与Bohdan Ganicky的解决方案一起出现的情况，如果ul之前没有直接的ul。

解决方案：

.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，那么做一些其他事情（在找到另一份工作之前;)）

Answer 11

h3:after {
  content: '___________';
}

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

11 个答案: