html - 这种边框如何用CSS实现

Question

在示例图像中，您可以看到“日期”和“名称”前后的粗黑线。我正在尝试用 CSS 来实现这一点。搜索过，但搜索时想不起来该叫什么。

.sort-btn-holder{
  display: inline-block;
}
.sort-title{
  display: block;
  text-align: center;
}

<div class="sort-btns pull-right">

  <div class="sort-btn-holder">
   <span class="sort-title">Date</span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
  </button>

  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
  </button>
  </div>

  <div class="sort-btn-holder">
   <span class="sort-title">Name</span>

    <button id="older" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
    </button>

    <button id="newer" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
    </button>
  </div>

</div>

我想我应该使用 :before 或 :after。 以下是 Fiddle 中 HTML 和 CSS 的链接:https://jsfiddle.net/dntbqykk/

Answer 1

这是一种使用绝对定位和 :after 伪元素来保存标签(例如“Date”)的方法。

该代码片段演示了概念验证，但仍有一些细节需要解决，以获得您可能想要融入网站的确切样式。

.sort-btn-holder {
  border: 1px dotted blue;
  display: inline-block;
  position: relative;
  padding-top: 25px;
}
.btn.btn-primary {
  border: 1px dotted red;
  width: 50px;
  height: 50px;
}
.sort-title {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 25px;
  right: 25px;
  height: 15px;
  border: 4px solid blue;
  border-width: 4px 4px 0 4px;
}
.sort-title:after {
  content: 'Date';
  margin: 0 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  background-color: white;
  text-align: center;
}

<div class="sort-btn-holder">
  <span class="sort-title"></span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://placehold.it/24x24" width="24px" height="24px">
  </button>
  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://placehold.it/24x24" width="24px" height="24px">
  </button>
</div>