html - 减少边框长度

Question

我目前正在尝试设计正确的边框。但是我想让边框变小。我知道是 CSS 中的填充使它变大了，但我需要另一个功能的填充。如果不用另一个元素覆盖边界的一部分，这是否可能？

.sort-search { /* filter padding */
  border-right: 1px solid black;
  border-top: none;
  border-bottom: none;
  border-left: none;
  color: black;
  background: none;
  padding-right: 2%;
  padding-left: 2%;
  padding-top: 1%;
  padding-bottom: 4%;
  outline: none;
}

<input type="button" value="Telefon" id="sort-search1" class="sort-search">
<input type="button" value="Namn" id="sort-search2" class="sort-search">
<input type="button" value="Kompetens" id="sort-search3" class="sort-search">
<input type="button" value="Orginasation" id="sort-search4" class="sort-search">
<input type="button" value="Roll" id="sort-search5" class="sort-search">

Answer 1

如果您可以将 inputs 包装在一个 div 中，您可以使用伪元素 :after 来制作您想要的边框。 (你不能在输入上使用 :after)

.sort-search { /* filter padding */
  border: 0;
  color: black;
  background: none;  
  outline: none;
}
div {
  position:relative; 
  display:inline-block;
  padding-right: 2%;
  padding-left: 2%;
  padding-top: 1%;
  padding-bottom: 4%;
  }
div:after {
  content: '';
  display: block;
  background-color:black;
  height: 12px; /*THE HEIGHT YOU WANT FOR YOUR LINE*/
  width: 1px;
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 1;
  
}

<div><input type="button" value="Telefon" id="sort-search1" class="sort-search"></div>
<div><input type="button" value="Namn" id="sort-search2" class="sort-search"></div>
<div><input type="button" value="Kompetens" id="sort-search3" class="sort-search"></div>
<div><input type="button" value="Orginasation" id="sort-search4" class="sort-search"></div>
<div><input type="button" value="Roll" id="sort-search5" class="sort-search"></div>