CSS基础测试13：GitHub Repo 工具条

题目：

我的回答：

<div class="btn-group-container">
  <div class="btn-group">
    <details class="details-menu">
      <summary class="details-menu-btn btn btn-default" role="button" aria-label="watch">
        <svg class="svg-icon">
          <use xlink:href="#icon-watch"></use>
        </svg>
        Unwatch
      </summary>
      <div class="details-menu-modal">
        菜单（略）
      </div>
    </details>
    <a class="btn btn-link" href="#" aria-label="63 users are watching this repository">63</a>
  </div>
  <div class="btn-group">
    <button class="btn btn-default" aria-label="star">
      <svg class="svg-icon">
        <use xlink:href="#icon-star"></use>
      </svg>
      Star
    </button>
    <a class="btn btn-link" href="#" aria-label="445 users starred this repository">445</a>
  </div>
  <div class="btn-group">
    <button class="btn btn-default" aria-label="fork">
      <svg class="svg-icon">
        <use xlink:href="#icon-fork"></use>
      </svg>
      Fork
    </button>
    <a class="btn btn-link" href="#" aria-label="25 users forked this repository">25</a>
  </div>
</div>

<svg style="display:none">
  <!-- svg sprite (代码略) -->
</svg>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/** 主容器 **/
.btn-group-container {display: flex;}

/** 按钮组 **/
.btn-group {
  display: flex;
  align-items: center;
}

.btn-group + .btn-group {margin-left: 10px;}
.btn-group .btn {border-radius: 0;}
.btn-group > .btn:not(:first-child),
.btn-group > .details-menu:not(:first-child) {margin-left: -1px;}

.btn-group > .btn:first-child,
.btn-group > .details-menu:first-child > .btn {
  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
}

.btn-group > .btn:last-child,
.btn-group > .details-menu:last-child > .btn {
  border-top-right-radius: .25em;
  border-bottom-right-radius: .25em;
}

/** 按钮 **/
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: inherit;
  background-repeat: repeat-x;
  background-position: -1px -1px;
  background-size: 110% 110%;
  border: 1px solid #ccced0;
  border-radius: .25em;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn:hover {z-index: 1;}

.btn > .svg-icon {
  width: 20px;
  height: 20px;
  margin-right: 2px;
  fill: currentColor;
  speak: none;
}

/** 按钮主题定义 **/
.btn-default {
  color: #24292e;
  background-color: #eff3f6;
  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
}

.btn-default:hover {
  background-color: #e6ebf1;
  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
  background-position: -.5em;
  border-color: #a5a8ac;
}

.btn-link {
  color: #24292e;
  background-color: #fff;
}

.btn-link:hover {color: #0366d6;}

/** 按钮下拉菜单 **/
.details-menu {
  position: relative;
  display: block;

}

.details-menu-btn::-webkit-details-marker {display:none;}
.details-menu-btn::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 3px;
  transform: translateY(25%);
  border: 4px solid transparent;
  border-top-color: currentColor;
}

.details-menu-modal {
  position: absolute;
}

wingmeng / front-end-quiz

CSS基础测试13：GitHub Repo 工具条 #33

题目：

我的回答：