html - CSS-样式“句柄”在没有 CSS 绝对的 div 之上

Question

我用上面的“句柄”设计了一个“日历”div。

这是通过设置 2 div 3*3 px 和黑色背景创建的，并将它们放置在绝对位置，正好在相对位置的父 div 内日历 div 的顶部上方。

此日历位于图像上方的绝对位置。

这可行，但感觉非常“硬编码”，因为日历 div 中的每次更改都会破坏显示，因为“句柄”会在同一个位置，而日历顶部边框可以移动。

如何在日历 div 本身的顶部获得相同的“句柄”样式，以便日历 CSS 高度的更改不会影响“句柄”？

Answer 1

您可以像这样使用伪元素- 请参阅下面的工作示例。

该.cal::before元素是一个 3 像素高的盒子 ( height)，左右两侧有 3 像素的黑色边框。

它在 Y 轴 ( ) 上与父日历元素绝对定位 -6px，top因此它超出日历的顶部边框和日历边界的 3pxleft和3px right。

.cal {
  border: 3px solid #000;
  display: inline-block;
  font-family: sans-serif;
  position: relative;
  text-align: center;
}

.cal span {
  /* day */
  display: block;
  font-size: 10px;
  padding: 3px 10px;
}

.cal b {
  /* date number */
  display: block;
  border-top: 3px solid #000;
  padding: 5px;
}

.cal::before {
  /* handles */
  content: '';
  position: absolute;
  height: 3px;
  top: -6px;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  left: 3px;
  right: 3px;
}

<div class="cal">
  <span>SUN</span>
  <b>3</b>
</div>

<br><br>

<div class="cal">
  <span>TALLER</span>
  <b>3</b>
  <b>4</b>
  <b>5</b>
</div>