css中如何将下划线延长

在 CSS 中，将下划线延长是一种常见的样式效果。可以通过 text-decoration 属性来实现，如下所示：

p {
  text-decoration: underline;
}

这将在所有段落中添加下划线。但是，如果您想要将下划线延长到文本之外，可以使用 border-bottom 属性。例如：

p {
  border-bottom: 1px solid black;
}

这将在每个段落的底部创建一个边框，形成下划线的效果。您可以设置边框的颜色、宽度和样式，以满足您的需求。

如果您想要更复杂的下划线效果，您可以使用伪元素 ::before 和 ::after。例如：

p::before {
  content: "";
  border-bottom: 1px solid black;
  width: 50%;
  margin-right: 10px;
}
p::after {
  content: "";
  border-bottom: 1px solid black;
  width: 50%;
  margin-left: 10px;
}

这将在每个段落的前后各创建一个伪元素，并且在它们的底部创建边框，形成下划线的效果。您可以调整伪元素的样式，以实现您想要的下划线效果。

总之，在 CSS 中将下划线延长是一种常见的样式效果，您可以使用 text-decoration、border-bottom 和伪元素来实现它。