Question

我希望在标题后面添加一行（左和右）。通常我可以使用标题容器的背景颜色和一些填充，并设法解决这个问题，如下所示：

但在这种情况下，标题的容器不是纯色，它有一个图像作为背景。关于如何解决这个问题的任何想法？

Answer 1

编辑：将.line的CSS更改为width: 10%以解决窄视口问题，正如评论中所注意到的那样。

以下是使用两个<div>作为线条的解决方案，然后使用非常宽的.wide-wrapper将标题居中。

HTML：

<div class="container">
    <div class="wide-wrapper">
        <div class="line"></div>
        <h1>Heading Title</h1>
        <div class="line"></div>
    </div>
</div>

CSS：

.container {
    overflow: hidden;
    position: relative;
    width: 100%;
    white-space: nowrap;
}

.wide-wrapper {
    left: -1200%;
    position: relative;
    text-align: center;
    width: 2500%;
}

.line {
    border-top: 3px solid grey;
    display: inline-block;
    padding: 5px;
    width: 10%;
}

h1 {
    display: inline-block;
}

这里是fiddle。

Answer 2

这是工作示例。

<!DOCTYPE html>
<html>
<head>
    <title>Line</title>
    <style>


    .heading {
        position: relative;
    }
    .heading h1 {
      font-family:Georgia, "Times New Roman", Times, serif;
      font-weight:100;
      font-size:36px;
      text-align: center;
      background: #fff;
      position: relative;
      display: block;
      max-width: 300px;
      margin: 0 auto;
    }
    .heading:before{
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #000;
        top: 50%;
    }

    </style>
</head>
<body>

    <div class="heading">
      <h1>Heading Title</h1>
    </div><!-- div.heading -->

</body>
</html>

Answer 3

HTML

<div class="heading"><h1>Hello World</h1></div>

CSS

.heading {
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.heading h1 {
    display: inline-block;
    position: relative;  
}

.heading h1::before,
.heading h1::after {
    content: "";
    position: absolute;
    height: 1px;
    background: #fff;
    top: 15px;
    width: 9999px;
}

.heading h1::before {
    right: 100%;
    margin-right: 10px;
}

.heading h1::after {
    left: 100%;
    margin-left: 10px;
}

jsFiddle Demo

当容器有图像作为背景时，标题后面的行

3 个答案:

HTML

CSS