详细信息摘要隐藏箭头 - CSS

在一些需要显示详细信息的页面中，我们经常需要实现一个展开/收起详细信息的功能。而为了减小页面的视觉负担，通常我们会使用隐藏箭头的方式隐藏详细信息的显示与隐藏。

实现思路

实现这个功能的思路是通过 CSS 对于 input 标签的 checked 属性来控制详细信息的显示与隐藏。具体实现步骤如下：

1. 构建 HTML 结构，使用 label 标签包裹 input 标签和详细信息；
2. 使用伪元素 ::before 和 ::after 来绘制隐藏箭头；
3. 定义一些 CSS 样式来控制详细信息的显示和隐藏。

HTML 结构

<label for="detail">
  <input id="detail" type="checkbox" name="detail">
  <p>摘要信息</p>
  <div class="detail-info">
    <p>详细信息</p>
  </div>
</label>

在这个 HTML 结构中，我们使用 label 标签来将 input 标签和详细信息包裹起来。当用户点击 label 标签时，input 标签会被选中，从而触发 CSS 中对于 input:checked 的样式定义。

CSS 样式

我们分别针对 input 和 input:checked 定义一些样式，来控制详细信息的显示和隐藏。下面是具体的 CSS 样式：

/* 隐藏 input 标签 */
#detail {
  display: none;
}

/* 绘制隐藏箭头 */
label::before,
label::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(-45deg);
  transition: all 0.3s ease-in-out;
}

/* 收起状态下的箭头 */
label::before {
  margin-right: 6px;
  transform: rotate(45deg);
}

/* 显示详细信息时的箭头 */
input:checked + p::before {
  transform: rotate(-45deg);
}

input:checked + p::after {
  transform: rotate(45deg);
}

/* 显示和隐藏详细信息 */
.detail-info {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

input:checked + p + .detail-info {
  height: auto;
  opacity: 1;
}

在上面的样式中，我们定义了一个隐藏的 input 标签。然后使用 before 和 after 伪元素来绘制箭头。对于收起和展开状态下的箭头，我们使用不同的 transform 来实现旋转。最后在 input:checked 选择器中，控制详细信息的显示和隐藏，通过改变 height 和 opacity 的值，同时触发过渡动画。

结语

通过上面的 HTML 结构和 CSS 样式，我们就可以轻松地实现一个隐藏箭头的详细信息摘要页面展示效果了。