I have this structure of pseudo elements:
&::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;
}
As you can see, in first-child
and last-child
I only overwrite 2 properties, so, it seems to make it nested in &::before
, but I can't. Also, on Internet, I haven't found, if it's possible.
Everything works just find, I just want to know, if there is possibility to make this code look prettier.
Try this
div {
&::before{
content: '';
position: absolute;
height: 100%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
}
&:first-child:before {
height: 50%;
bottom: 0;
}
&:last-child:before {
height: 50%;
top: 0;
}
}