在css中，我们可以使用边框（border）属性为元素添加边框样式。而其中最常见的边框样式就是实线（solid）、虚线（dashed）和点状线（dotted）了。不过，有时候我们想要为边框添加一个小小的线条，该如何实现呢？ 其实，我们可以使用伪元素（pseudo-element）::before和::after来给元素添加线条。举个例子，以下代码就可以在一个正方形的元素的左边和上边添加一条黑色的1像素线条：

.square{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.square::before,
.square::after{
content: "";
display: block;
position: absolute;
background-color: #000;
}
.square::before{
top: 0;
left: 0;
width: 1px;
height: 100%;
}
.square::after{
top: 0;
left: 0;
width: 100%;
height: 1px;
}

我们为元素.square设置了相对定位（position: relative），这样我们就可以为伪元素设置绝对定位了（position: absolute）。接着，我们给伪元素设置了空内容（content: ""），以及块级元素的形态（display: block）。这些样式可以让伪元素看起来像个独立的元素，方便我们进行样式的设置。 然后，我们使用了相同的样式来设置伪元素的背景色（background-color: #000），表示这里要添加一条黑色的线。接着，我们用top和left分别设置伪元素的位置，还设置了宽度（width）和高度（height）来调整线条的长短和粗细。注意，我们使用了百分比来设置高度或宽度，这表示这条线会占据相应父容器的尺寸。 最后，我们的正方形元素就会变成这样： 总之，使用伪元素可以为元素添加小而美的线条效果，是css样式设计的常用技巧。