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

Problem

I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.

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

Requrements

I need to style a h3 tag to have an underline/border after the content.

我需要为h3标签设置样式,使内容后面有下划线/边框。

This h3 will be used multiple times on the page, so the conent length can vary

这个h3将在页面上多次使用,因此conent长度可以变化

The solution needs to be cross-browser (IE 6/7/8, FF 3, & Safari)

解决方案需要跨浏览器(IE 6/7/8,FF 3和Safari)

Sample Code

<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 Output

Sample Text to Have Line Afterwards ______________________________________

Another Example __________________________________________________________

And Yet Another Example __________________________________________________

Notes

I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags

我认为#sample:after {content:“__________”; }选项不起作用,因为那只是其中一个标签的正确长度

I tried a background-image, but if it gave me problems if I gave it one with a large width

我尝试了一个背景图像,但是如果我给它一个宽度很大的问题就给我带来了问题

Using text-indent didn't see to give me the effect I was looking for

使用text-indent没有看到给我我想要的效果

I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either

我尝试了border-bottom和text-decoration的组合:none,但这似乎也没有用

Any ideas would be much appreciated!

任何想法将不胜感激!

11 个解决方案

#1

This will work if class 'c' is always the parent of the h3...

如果类'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;
}

It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.

它允许容器具有边框,然后使用绝对定位将h3移动到它上面,背景颜色可以让它覆盖它所覆盖的c边界部分。

#2

try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?

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

#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

#4

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

You need to know the width of the text, but works pretty well.

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

#5

The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:

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

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

where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.

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

#6

this worked for me

这对我有用

        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;
        }

you make the div the width of your content

你将div设为内容的宽度

then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image

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

#7

Can you pad content in the UL tags? If so, this might work:

你可以在UL标签中填充内容吗?如果是这样,这可能会起作用:

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

#8

check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html

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

then again i have NO IDEA how to control the end of the line.

然后我再也没有IDEA如何控制线的结束。

#9

Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky

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

Imagine:

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

and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.

并没有出现任何与Bohdan Ganicky的解决方案,如果ul不是紧接着ul之前。

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

We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))

我们关心IE6,但接受这是一种美感,IE6用户不会受到影响。如果你不能让设计师接受这个并且你不能改变HTML,那么做其他事情(在找到另一份工作之前;))

#10

Here's a better answer:

这是一个更好的答案:

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

Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.

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

#11

h3:after {
  content: '___________';
}

#1