html - 透明文字后面的线

此布局展示了我想要实现的目标。

http://i.imgur.com/ub9FgP5.png

基本上，我需要做：
-----文字-----------------再输入文字--------

当然，行的大小需要自动调整，因为文本在每页上的宽度都是不同的。我尝试了几件事，但还是一无所获...
请注意，文字不能有背景，必须透明。

http://jsfiddle.net/7jGHS/979/

最接近的是这一行，但该行仍在遍历文本，而且不可能！

例：



      无标题文档

          #content {
              宽度：1000像素；
              高度：100px；
              背景：红色；
          }

    #left_column {
        width: 680px;
        float: left;
        margin-left: 15px;
        background: green;
    }

    #right_column {
        width: 290px;
        float: left;
    }

    .line1 {
        width: 10%;
        height: 3px;
        background: yellow;
        float: left;
        min-width: 20px;
        margin-top: 40px;
    }
    .line2 {
        width: 75%;
        max-width: 71%;
        height: 3px;
        background: yellow;
        float: left;
        min-width: 20px;
        margin-top: 40px;
    }

    h1 {
        float: left;
        font-size: 48px;
        margin: 10px 15px 0px 15px;
    }

body {
        background: blue;
        color: white;
    }
</style> </head> <body>
<div id="content">
    <div id="left_column">
        <div class="line1"></div>
        <h1>Title</h1>
        <div class="line2"></div>
    </div>
    <div id="right_column"> <h1>Title again</h1> <div class="line1"></div>    </div>      </div> </body> </html>

在这里，我将线宽设置为百分比，但是当文本较长时，该行将落在第二行，而我只想使其变小。

我希望你们知道我的意思..
问候！

最佳答案

如果是纯色背景，则可以将类添加到<h2>

的HTML

<h2 class="bluecolor"><span>THIS IS A TEST</span></h2>
<p>this is some content</p>

的CSS

.bluecolor span {background:blue;}

http://jsfiddle.net/7jGHS/983/

关于html - 透明文字后面的线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21737557/