css中划线 css中划线样式

CSS中划线的实现方法

在网页设计中，为了增加标题或者文本的可读性和美观性，我们经常会使用到划线效果，而在CSS中，有多种方法可以实现划线效果，下面将介绍几种常见的方法。

1、使用border属性：

通过设置元素的边框样式，可以实现划线效果，我们可以使用border-bottom属性来设置底部边框的样式，

h1 {
  border-bottom: 2px solid #000;
}

上述代码将给所有的h1元素添加一个底部边框，边框宽度为2像素，颜色为黑色。

2、使用text-decoration属性：

text-decoration属性用于设置文本的装饰效果，包括划线、下划线、删除线等，我们可以使用text-decoration属性来实现划线效果，

h1 {
  text-decoration: underline;
}

上述代码将给所有的h1元素添加一个下划线效果。

3、使用伪元素和：:before/::after选择器：

通过使用伪元素和：:before/::after选择器，我们可以在元素的前后添加内容，从而实现划线效果。

h1::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #000;
}

上述代码将在h1元素的前面添加一个高度为2像素的黑色线条。

4、使用background属性和linear-gradient函数：

通过设置元素的背景样式，我们可以实现更加灵活的划线效果。

h1 {
  background: linear-gradient(to right, transparent, #000 50%, transparent);
  background-size: 2px 100%;
}

上述代码将给所有的h1元素添加一个从左到右的渐变背景，其中黑色部分的高度为50%，从而实现了划线效果。