如何使用CSS在span前后生成一行，并在div中包含文本

我有一个在div中包含文本的span。在该span的前面，我想要一条2 px的线到左边的边缘。在文本之后，我想要一条模拟线到父元素的右边缘

当前标记：

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

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

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

我试着在课文后用一个额外的跨距。我没能把它弄对。它是基于。我的尝试可以在

更新：

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

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

父div具有渐变色作为背景和高度。文本上的背景色不能随意使用

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

---

你可以这样写：

CSS

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

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

---

选中此项

您可以这样写：

CSS

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

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

---

勾选此项

您可以通过定位G以及：-

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>

这是我的文本

---

您可以通过定位以及以下方式实现您想要的结果：-

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>

这是我的文本

---

您的小提琴几乎可以做到这一点，您只需要将一个元素放置在另一个元素之上（如果您想在纯CSS中实现这一点）。另一种方法是将line元素分成两部分-一部分用于文本之前，另一部分用于文本之后

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

HTML:

---

您的Fiddle几乎可以做到这一点，您只需要将一个元素置于另一个元素之上（如果您想在纯CSS中实现这一点）。另一种方法是将line元素分成两部分-一部分用于文本之前，另一部分用于文本之后

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

HTML:

看看这个：

我修改了Shailender Arora的想法，改为使用边界虚线

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

看看这个：

我修改了Shailender Arora的想法，改为使用边界虚线

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

HTML

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

示例：

HTML

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

---

示例：

Play with this&u将获得答案Play with this&u将获得确切样式的答案添加边框样式：虚线；to.parent.虚线边框不是此处的点。这只是为了举例说明。对于确切的样式，添加边框样式：虚线；to.parent.虚线边框不是此处的点。这只是为了说明。