如何使用html css和javascript在图标和文本的任一侧添加行？

我试着在图标顶部和文本底部的任一侧获得线条，并动态调整到我的项目的宽度

试试像这样的东西

我创建了一个带有边框和两个文本元素的div

<div class="text-container">
    <span class="top-text">Top Text"</span>
    <span class="bottom-text">Bottom Text</span>
</div>

---

我将文本元素定位为相对于父div的绝对位置，并在其上使用背景来覆盖边框。

这可能对您有用。 HTML

---

使用Jquery动态宽度捕获。 HTML

jQuery

var getWidthTop = $('.box > .top').width() / 2;
var getWidthBottom = $('.box > .bottom').width() / 2;
$('.box > .top').css({'left':'calc(50% - ' + getWidthTop + 'px)'});
$('.box > .bottom').css({'left':'calc(50% - ' + getWidthBottom + 'px)'});

创造一些小提琴

---

你试过什么代码？就说我不知道？虽然我试过了五月密码…谢谢你的回答，但这并不是我想要的。我想要没有背景和边框的文本。无法在透明上工作。请更新css类。框{margin top:50px；位置：相对；边框：1px solid d00；最小高度：100px；文本对齐：居中；}.box>span.top{background:fff；padding:5px；top:-15px；位置：绝对；左侧：calc50%-35px；}.box>span.bottom{位置：绝对；背景：fff；填充：5px；底部：-15px；左侧：calc50%-50px；}您粘贴了我的好友的一些代码。仍然没有工作。请检查正文{背景：红色；}你会发现错误的。好吧，我想要一个文本的透明背景。谢谢你的回答。不适用于透明。好吧，谢谢你的回答，但是，这不是我想要的。我想要没有背景和文本边框。也许这篇文章帮助你，对不起，我的朋友，它不适用。它很有用，但不是在透明背景中。一旦删除文本的背景，你就会明白我的意思。

.box {
    margin-top: 50px;
    position: relative;
    border: 1px solid #d00;
    min-height: 100px;
    text-align: center;
}
.box > span.top {
    background: #fff;
    padding: 5px;
    border: 1px solid #d00;
    top: -15px;
    position: absolute;
    left: calc(50% - 35px);
}
.box > span.bottom {
    position: absolute;
    background: #fff;
    padding: 5px;
    border: 1px solid #d00;
    bottom: -15px;
    left: calc(50% - 50px);
}

<div class="box">
    <span class="top">TOP TEXT</span>
    <span class="bottom">BOTTOM TEXT</span>
</div>

.box {
    margin-top: 50px;
    position: relative;
    border: 1px solid #d00;
    min-height: 100px;
    text-align: center;
}
.box > span.top {
    background: #fff;
    padding: 5px;
    border: 1px solid #d00;
    top: -15px;
    position: absolute;
}
.box > span.bottom {
    position: absolute;
    background: #fff;
    padding: 5px;
    border: 1px solid #d00;
    bottom: -15px;
}

var getWidthTop = $('.box > .top').width() / 2;
var getWidthBottom = $('.box > .bottom').width() / 2;
$('.box > .top').css({'left':'calc(50% - ' + getWidthTop + 'px)'});
$('.box > .bottom').css({'left':'calc(50% - ' + getWidthBottom + 'px)'});

<div class="box">
  <span class="top">
    Some TExt
  </span>
  <span class="bottom">
    Some TEXt
  </span>
</div>