[分享]css中after竖线怎么弄

CSS中after伪类可以用来在元素内容后面添加新的内容。而且可以通过after伪类来制作一条竖线。

 .container:after{
        content: ';
        display: block;
        width: 1px;
        height: 100%;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    } 

上面代码中，我们新建了一个元素的after伪类，将其设为块级元素并设置其宽度为1px，高度为100%。同时，将背景颜色设为黑色，并使其与父元素左右居中。通过这样的操作，我们就可以实现一条完整的竖线。

同时，我们还可以根据需要对竖线进行进一步的样式定制。比如，可以通过设置float属性来使元素浮动，也可以指定边框的颜色、样式和宽度等。

 .container:after{
        content: ';
        display: block;
        width: 1px;
        height: 100%;
        border-left: 2px dashed #ff0000;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    } 

上面代码中，我们设置了竖线的边框为2px宽的虚线，颜色为红色。这样，我们就可以根据需求对竖线进行灵活的样式定制。