CODEWITHSUNDEEP
cssreactjsstyled-components
Gray Singh
Gray Singh

Reputation: 310

Don't Extend Lines on React Styled Components

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 CLICK HERE

EXPECTED OUPUT

enter image description 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
  }
}
`;

Upvotes: 0

Views: 36

Answers (3)

Viira
Viira

Reputation: 3911

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

Upvotes: 1

Sachin Ananthakumar
Sachin Ananthakumar

Reputation: 810

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
  }
}
`;

Upvotes: 1

Servesh Chaturvedi
Servesh Chaturvedi

Reputation: 559

 &:before, &:after {
    content: "";
    width:30%;
    height: 1px;
    background-color: #A1A1A1;
    margin: auto;

Put this instead of the border.

Upvotes: 0

Related Questions