css中怎么让线变长

CSS中要让线变长，我们可以使用伪元素来实现。伪元素的用法也非常简单，只需要在选择器后面加上::before或::after就可以了。

例如，我们可以通过如下代码让一条横线变长：

p::after {
    content: "";
    display: block;
    height: 1px;
    background-color: black;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
} 

上面的代码中，content: "";用于指定伪元素的内容为空；display: block;使得伪元素以块级元素的形式呈现；height: 1px;指定了伪元素的高度为1像素，即横线的高度；background-color: black;指定了横线的颜色为黑色；width: 50%;让横线的宽度为父元素宽度的50%；margin-left: auto;和margin-right: auto;则使得横线水平居中。

如果要让竖线变长，只需要将width改成height即可：

p::after {
    content: "";
    display: block;
    width: 1px;
    background-color: black;
    height: 50%;
    margin-top: auto;
    margin-bottom: auto;
} 

上面的代码中，width: 1px;指定了竖线的宽度为1像素，height: 50%;让竖线的高度为父元素高度的50%；margin-top: auto;和margin-bottom: auto;则使得竖线垂直居中。

通过这样简单的伪元素技巧，我们就可以轻松地让线变长了。