css3上下划线

CSS3中，上下划线是一种常见的文本装饰样式，可以用来强调文本内容或者美化页面效果。本文将介绍如何使用CSS3来实现上下划线效果。

首先，我们需要为文本添加下划线。可以使用text-decoration属性来实现，将其设置为underline即可。

p {
  text-decoration: underline;
}

但是，这样会使文本的所有部分都添加下划线，如果我们只想在文本的特定部分添加下划线该怎么办呢？可以使用伪类选择器来实现。

比如我们想要给"特定部分"两个字添加下划线，可以这样写：

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

上面的代码使用了::after伪元素，在文本的末尾添加了一个空的边框，形成了下划线效果。而border-bottom可以控制边框的样式和颜色。

如果要添加上划线，同样可以使用类似的方法：

p::before {
  content: "";
  border-top: 1px solid black;
}

同样地，使用::before伪元素和border-top样式可以实现在文本前面添加上划线的效果。

最后，如果我们想要同时添加上下划线，可以将::before和::after伪元素同时使用。

p::before,p::after {
  content: "";
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

上面的代码中，使用了逗号分隔符来选择多个伪元素，这样在文本前后都会添加上下划线。

总之，使用CSS3可以轻松实现上下划线样式，让页面效果更加美观。