使用CSS在标头旁边添加一行 [英] Add a line next to a header with CSS

问题描述

有没有办法使用CSS显示标题旁边的一行？这里是我在说什么的形象：

我可以使用静态背景图片，但是需要为每个标题自定义CSS。我可以在：后面使用：和背景颜色做一些hacky的东西，但它看起来不正确对于渐变背景。

我想使用CSS，而不是JavaScript。

p>在过去我做了这样的事情：

< h1>< span>示例文本< / span> / h1>

  h1 {background-image：url（line.png）;} 
 h1 span {background-color：#FFF; dislpay：inline-block; padding-right：10px} 
  

虽然这是工作，它是黑客，它不能很好地与渐变背景，因为 span 必须有一个坚实的背景颜色。

我真正想要的是这样的：

h1>示例文字< / h1>
h1 {background-image：url（line.png）;} / *示例文本* /

我错了原始帖子中：之后 ，我在想以前的另一个问题。

解决方案

做了一些更多的研究后，我想我找到了最好的解决方法：

  h2 {
 color：＃F37A1F; 
 display：block; 
 font-family：Montserrat，sans-serif; 
 font-size：24px; 
 font-weight：bold; 
 line-height：25px; 
 margin：0; 
 text-transform：uppercase; 
} 
 
 h2：after {
 background：url（../ images / h2.png）repeat-x center; 
 content：; 
 display：table-cell; 
 width：100％; 
} 
 
 h2> span {
 display：table-cell; 
 padding：0 9px 0 0; 
 white-space：nowrap; 
} 
  

修改者：如何创建一个字段集图例风格的在标题文本上？

它仍然需要一些额外的标记，不幸的是，但它是我找到的最小的。我可能只是写一些jQuery来自动添加 span 到 h2 s。

Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:

I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.

I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.

UPDATE:

In the past I've done something like this:

<h1><span>Example Text</span></h1>

h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}

While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.

What I'm really looking for is something like this:

<h1>Example Text</h1> h1 {background-image:url("line.png");} /* but don't appear under the example text */

I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.

解决方案

After doing some more research, I think I found the best solution:

h2 {
    color: #F37A1F;
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 25px;
    margin: 0;
    text-transform: uppercase;
}

h2:after {
    background: url("../images/h2.png")  repeat-x center;
    content: " ";
    display: table-cell;
    width: 100%;
}

    h2 > span {
        display: table-cell;
        padding: 0 9px 0 0;
        white-space: nowrap;
    }

Modified from: How can I make a fieldset legend-style "background line" on heading text?

It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.

这篇关于使用CSS在标头旁边添加一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！