layui-icon layui-icon-down fold如何用在legend上面生效

您可以使用CSS中的伪类选择器`:after`来实现在`legend`元素上添加一个`<i>`标签，并在该标签上应用`layui-icon-down`类，从而实现类似于折叠图标的效果。以下是一个示例代码：

HTML代码：

<fieldset>
  <legend>示例</legend>
  <p>这是一些文本内容。</p>
</fieldset>

CSS代码：

/* 添加折叠图标 */
legend:after {
  content: "\e61a";
  font-family: "layui-icon";
  font-size: 12px;
  margin-left: 5px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
legend.fold:after {
  transform: rotate(-180deg);
}

/* 鼠标悬停时修改样式 */
legend:hover {
  cursor: pointer;
  color: #009688;
}
legend:hover:after {
  color: #009688;
}

通过为`legend`元素添加`.fold`类，可以实现折叠图标的切换效果。同时，通过使用`transition`属性和鼠标悬停时的样式修改，可以实现更加平滑的动画效果和交互体验。