I have a problem on the lines between the OR. I need it not to be extended to its beginning/end.
Please see codesandbox here 
CODE
const OR = styled.div`
display: flex;
flex-direction: row;
color: #5C5C5C;
font-size: 14px;
&:before, &:after {
content: "";
flex: 1 1;
border-bottom: 1px solid;
border-color: #A1A1A1;
margin: auto;
}
&:before {
margin-right: 10px
}
&:after {
margin-left: 10px
}
}
`;
CodePudding user response：
Set max-width for the pseudo elements ::before and ::after
const OR = styled.div`
display: flex;
flex-direction: row;
color: #5C5C5C;
font-size: 14px;
&:before, &:after {
content: "";
flex: 1 1;
border-bottom: 1px solid;
border-color: #A1A1A1;
margin: auto;
max-width: 30%;
}
&:before {
margin-right: 10px
}
&:after {
margin-left: 10px
}
}`
Updated link
CodePudding user response：
&:before, &:after {
content: "";
width:30%;
height: 1px;
background-color: #A1A1A1;
margin: auto;
Put this instead of the border.
CodePudding user response：
just change your OR component like this
const OR = styled.div`
display: flex;
width:50%; // Add
flex-direction: row;
color: #5C5C5C;
font-size: 14px;
margin: auto; // Add
&:before, &:after {
content: "";
flex: 1 1;
border-bottom: 1px solid;
border-color: #A1A1A1;
margin: auto;
}
&:before {
margin-right: 10px
}
&:after {
margin-left: 10px
}
}
`;