Flexbox and CSS pseudo classes

Question

I'm trying to recreate this bracket that's the left side on the screen on the right side as well. I used flex order to reverse the columns but having trouble with the purple lines using :before and :after pseudo-classes.

Any ideas?

Codepen Link

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.half {
  display: flex;
  justify-content: space-between;
}

.region-1,
.region-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 44%;
}

.round {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.round:first-child .match::before {
  display: none;
}

.round:first-child .match__content::before {
  display: none;
}

.round:last-child .match::after {
  display: none;
}

.match {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px 10px;
  padding: 10px 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
}

.match__content {
  width: 100%;
  height: 20px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
}


/* LEFT SIDE */

.region-2 .round-1 {
  order: 10;
}

.region-2 .round-2 {
  order: 9;
}

.region-2 .round-3 {
  order: 8;
}

.region-2 .round-4 {
  order: 7;
}

.region-2 .round-5 {
  order: 6;
}

.region-1 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-left: 2px solid purple;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-1 .match:nth-child(odd)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-1 .match:nth-child(even)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  bottom: 50%;
}

.region-1 .match__content::before {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: -10px;
}


/* RIGHT SIDE */

.region-2 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-right: 2px solid purple;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-2 .match:nth-child(even)::before {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-2 .match:nth-child(odd)::before {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-2 .match__content::after {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: -10px;
}

Bhuwan · Accepted Answer

Its because you don't have symmetry in your code for both left and right hand side...No need to switch :before and :after for both...just play with left and right values and border-color

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.half {
  display: flex;
  justify-content: space-between;
}

.region-1,
.region-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 44%;
}

.round {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.match {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px 10px;
  padding: 10px 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
}

.match__content {
  width: 100%;
  height: 20px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
}

.round:first-child .match::before {
  display: none;
}

.round:first-child .match__content::before {
  display: none;
}

.round:last-child .match::after {
  display: none;
}


/* LEFT SIDE */

.region-2 .round-1 {
  order: 10;
}

.region-2 .round-2 {
  order: 9;
}

.region-2 .round-3 {
  order: 8;
}

.region-2 .round-4 {
  order: 7;
}

.region-2 .round-5 {
  order: 6;
}

.region-1 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-left: 2px solid purple;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-1 .match:nth-child(odd)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-1 .match:nth-child(even)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  bottom: 50%;
}

.region-1 .match__content::before {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: -10px;
}


/* RIGHT SIDE */

.region-2 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-left: 2px solid purple;
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-2 .match:nth-child(even)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  left: -10px;
  width: 10px;
  bottom: 50%;
  margin-left: -2px;
}

.region-2 .match:nth-child(odd)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  left: -10px;
  width: 10px;
  top: 50%;
  margin-left: -2px;
}

.region-2 .match__content::before {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  right: -10px;
}

Flexbox and CSS pseudo classes

Answers (1)

Related Questions