如何在两个文本之间划线（css或js）

Question

我使用bootstrap UI，我有这个代码：

array(6 => 'foobar', 24 => 'barfoo', 30 => 'fizz', 35 => 'buzz')

现在我需要在 <div class="row"> <div class="col-xs-12 col-ms-12" style="margin-top:15px !important;"> <h2><strong>1 x Gourmet Tasting Menu for Two</strong><span class="pull-right">£96.00</span></h2> </div> </div> 和name之间添加点（。），所以这样的事情：

price

Screenshoot：

最好的方法是什么？一些JS代码或CSS代码？

Answer 1

对于仅CSS解决方案，您可以使用伪元素来创建带边框的点。点将沿着行的整个宽度运行。要隐藏点并允许它们在项目文本和价格之间具有＆＃34;动态＆＃34; 宽度，您可以为那些将掩盖额外点的元素添加背景颜色。通常情况下，边框会位于所有这些边框之下，因此我们将相对位置拉出伪元素以将其隐藏在文本元素后面。

＆＃13;

＆＃13;

strong,
span {
  padding: 0 5px;
  background-color: white;
}
span {
  float: right;
}
h2:after {
  content: '';
  display: block;
  position: relative;
  bottom: 8px;
  width: 100%;  
  border-bottom: 2px dotted #333;
  z-index: -1;
}

＆＃13;

<h2><strong>Text Here</strong><span>$9.99</span></h2>

＆＃13;

＆＃13;

＆＃13;