如何使用CSS在div内的文本之前和之后制作一行答案

【问题标题】：How to use CSS to make a line before and after span with text inside div如何使用CSS在div内的文本之前和之后制作一行
【发布时间】：2012-07-22 15:20:41
【问题描述】：

我在 div 中有一个带有文本的跨度。在那个跨度的前面，我想要一条 2 px 的线到左边的边缘。在文本之后，我想要一条模拟线转到父元素的右边缘。

当前标记：

<div style="width: 400px;">
    <span class="label" style="padding-left: 40px;">This is my text</span>
</div>

预期结果：

----- This is my text --------------------------

什么是我的问题的最佳解决方案？

我尝试在文本后面的行中使用额外的跨度。没能把它弄好。它基于Let span fill remaining width?。我的尝试可以在here找到。

更新：

父 div 有一个渐变颜色作为背景和一个高度。 AFAIK 无法使用文本上的背景颜色。

<div style="
    background-image: none;
    background-color: #99D166;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #C0E3A1), color-stop(3%, #A6D77A), color-stop(100%, #8CCB52));
    background-image: -webkit-linear-gradient(top, #C0E3A1, #A6D77A 3%, #8CCB52);
    background-image: linear-gradient(top, #C0E3A1, #A6D77A 3%, #8CCB52);
    width: 400px;
    height: 40px;">

【问题讨论】：

玩这个你会得到答案jsfiddle.net/surendraVsingh/yDLuK/7

标签： css

【解决方案1】：

HTML

<span class="label">You're Text Message</span>

CSS

span.label:after{content:"------------";padding-right:15px;letter-spacing:-1px;color:#3399ff;}
span.label:before{content:"------------";padding-left:15px;letter-spacing:-1px;color:#3399ff;}

例如：http://jsfiddle.net/2qLptucL/1/

【讨论】：

【解决方案2】：

你可以这样写：

CSS

.label {
    margin-left: 40px;
    display:inline-block;
    height: 20px;
    background:#fff;
}

.parent {
    border-bottom:2px solid red;
    width: 400px;
    height:9px;
}

查看http://jsfiddle.net/yDLuK/3/

【讨论】：

对于精确样式添加边框样式：虚线；到.parent。
虚线边框不是重点。这只是为了说明。

【解决方案3】：

您可以通过 positiong 以及：-

CSS

.label {
    background: white;
    float: left;
    height: 20px;
    margin-left: 30px;
    position: relative;
    top: -8px;
}

.line {
    height: 2px;
    background-color: red;
    display: block;
    margin-top: 9px;
    margin-bottom: 9px;
}

HTML

<div style="width: 400px;">
    <span class="label">This is my text</span>
    <span class="line"></span>
</div>

http://jsfiddle.net/yDLuK/6/

【讨论】：

【解决方案4】：

您的 Fiddle 几乎可以做到这一点，您只需将一个元素放在另一个元素之上（如果您想在纯 CSS 中执行此操作）。另一种选择是将 line 元素分成两部分 - 一个用于文本之前，一个用于文本之后。

虽然您可以使用负边距将其向上移动到行的顶部，但将文本和行元素包含在容器元素 like this 中并在容器上使用相对定位并在容器上使用绝对定位可能是有意义的容器元素中的文本和行。

HTML：

<div id="container">
    <span class="line"></span>
    <span class="label">This is my text</span>
</div>

CSS：

#container {
width: 400px;
position: relative;
}

.label {
    position: absolute;
    left: 40px;
    top: 0px;
    padding: 0 6px 0 6px;
    height: 20px;
    background-color: #fff;
}

.line {
    position: absolute;
    left: 0;
    top: 0.5em;
    height: 2px;
    width: 100%;
    background-color: red;
    display: block;
}

【讨论】：

【解决方案5】：

看看这个：

http://jsfiddle.net/WVzNf/

我重新设计了 Shailender Arora 的想法，改为使用边框虚线。

另一种方法可能是删除边框并改用背景图像。这样您就可以完全控制它的外观。

【讨论】：