仅顶部和底部的 CSS 边框

在某些情况下，我们需要在一个 HTML 元素的顶部和底部添加边框，但是不需要在其左侧和右侧添加边框。在这种情况下，我们就需要使用一些 CSS 技巧来实现这个效果。

使用 border-top 和 border-bottom 属性

我们可以使用 CSS 的 border-top 和 border-bottom 属性来分别添加顶部和底部的边框。下面是一个例子：

.element {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

这样，我们就在 .element 元素的顶部和底部添加了 1 像素宽的黑色边框。需要注意的是，这种方式只有在我们确定 .element 元素的宽度固定时才适用，因为这种方式会占据 .element 元素的宽度。

使用伪元素

如果我们不能确定 .element 元素的宽度，或者不想占据其宽度，可以使用伪元素来实现只在顶部和底部添加边框。

.element {
  position: relative;
}

.element::before,
.element::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #333;
}

.element::before {
  top: 0;
}

.element::after {
  bottom: 0;
}

这样，我们就在 .element 元素的顶部和底部添加了高度为 1 像素的黑色边框，而不会占据 .element 元素的宽度。我们使用了 position: relative 属性来告诉浏览器我们要对 .element 元素的伪元素进行绝对定位，使用了 content 属性来指定伪元素的内容为空字符串，使用了 position: absolute 属性来指定伪元素绝对定位，使用了 top 和 bottom 属性来确定伪元素的位置，使用了 background-color 属性来指定伪元素的背景色，使用了 height 属性来指定伪元素的高度，使用了 left 和 right 属性来指定伪元素的宽度。