I am working with a structure of pseudo elements, which looks like this:
&::before {
content: '';
position: absolute;
height: 100%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
}
&:first-child:before {
content: '';
position: absolute;
height: 50%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
bottom: 0;
}
&:last-child:before {
content: '';
position: absolute;
height: 50%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
top: 0;
}
While the code works perfectly fine, I am wondering if there is a way to make it look cleaner and more elegant. Despite trying different things, I haven't yet found an effective solution.
If anyone has any suggestions on how I can improve the appearance of this code while keeping its functionality intact, I would appreciate the insight.