字段集和图例的自定义边框

Question

抱歉，如果之前有人问过这个问题，我的朋友让我为他们的网站做这种字段集。

此链接中的屏幕截图

它看起来很正常，但我很好奇如何在“旨在保留”文本的左侧和右侧获得那条小垂直线。

帮助将不胜感激。

问候，

Answer 1

您可以使用:before和:after伪元素来设置这两条特定垂直线的样式：

fieldset {
  border:1px solid gray;
}
legend {
  padding: 0.2em 0.5em;
  color: gray;
  font-size: 90%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
legend:before {
  position: absolute;
  content: '';
  height: 8px;
  border-left: 1px solid gray;
  left: 0px;
  top: 7px;
}
legend:after {
  position: absolute;
  content: '';
  height: 8px;
  border-right: 1px solid gray;
  right: 0px;
  top: 7px;
}

<form>
  <fieldset>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>