CSS Techniques边框右侧有一条水平线

Question

我正在尝试创建一个连接右边水平线的边框。下面的草图是它应该是什么样子，我需要有关如何创建它的想法。谢谢！任何可以帮助我的人都会非常感激。

Answer 1

这是一个有效的例子。

＆＃13;

＆＃13;

#example {
  position: relative;
}
#example:before {
  content: "";
  display: block;
  width: 100%;
  height: 0px;
  position: absolute;
  top: 50%;
  left: 0px;
  border-bottom: solid 1px #999;
}
#example span {
  position: relative;
  display: inline-block;
  padding: 5px;
  color: #999;
  background: #FFF;
  border: solid 1px #999;
}

＆＃13;

<div id="example">
  <span>LATEST PRODUCTS</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<style type="text/css">
.test {
    width: 100%;
    height: 50px;
    background-color: #F0F;
    position: relative;
}
.test:before {
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    content: "";
    background-color: #eee;
    position: absolute;
}
</style>
<div class="test"></div>