CODEWITHSUNDEEP
htmlcss
Vinicius Lopes
Vinicius Lopes

Reputation: 21

Moving ::before and ::after

I'm trying to solve an exercise but I can not do it.

In theory I have to move the ::before and ::after elements of the .calendar element in the proper way so they can be placed just like the picture.

Please move the ::before and ::after of the element in the proper way so they can be placed just like the picture.

Change their colors as well so they can have the same color, and apply the border-radius to the ::before and ::after of the to make them look like a ring in 2 dimensions seen from the front.

.calendar {
  top: 0em;
  left: 1em;
  padding-top: 5px;
  width: 80px;
  background: #ededef;
  font-size: 54px;
  text-align: center;
  color: #000;
  border-radius: 3px;
  position: absolute;
}

.calendar em {
  display: block;
  font-size: 15px;
  color: #fff;
  background: #04599a;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.calendar:before,
.calendar:after {
  content: "";
  float: left;
  width: 8px;
  height: 8px;
  background: #111;
  z-index: 1;
  border-radius: 10px;
  box-shadow: 0 1px 1px #fff;
  position: absolute;
}

.calendar:before {
  left: 11px;
}

.calendar:after {
  right: 11px;
}

.calendar em:before,
.calendar em:after {
  content: "";
  float: left;
  margin: 10px;
  width: 5px;
  height: 15px;
  background: grey;
  z-index: 5;
  border-radius: 50px;
  position: absolute;
}

.calendar em:before {
  left: 30px;
}

.calendar em:after {
  right: 13px;
  top: -16px;
  left: 2px;
  bottom: 10px;
  position: absolute;
}
<p class="calendar">7 <em></em></p>

My calendar should look like this

Upvotes: 1

Views: 175

Answers (1)

isherwood
isherwood

Reputation: 61063

You shouldn't be using floats in general. They needlessly complicate positioning and aren't necessary. There are more modern ways to align things if that's what you're after.

Mostly, just position your elements with top and left:

.calendar {
  top: 0em;
  left: 1em;
  padding-top: 5px;
  width: 80px;
  background: #ededef;
  font-size: 54px;
  text-align: center;
  color: #000;
  border-radius: 3px;
  position: absolute;
}

.calendar em {
  display: block;
  font-size: 15px;
  color: #fff;
  background: #04599a;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.calendar:before,
.calendar:after {
  content: "";
  width: 8px;
  height: 8px;
  background: #111;
  z-index: 1;
  border-radius: 10px;
  box-shadow: 0 1px 1px #fff;
  position: absolute;
  top: 5px;
}

.calendar:before {
  left: 11px;
}

.calendar:after {
  right: 11px;
}

.calendar em:before,
.calendar em:after {
  content: "";
  margin: 10px;
  width: 5px;
  height: 15px;
  background: grey;
  z-index: 5;
  border-radius: 50px;
  position: absolute;
  top: -16px;
}

.calendar em:before {
  left: 52px;
}

.calendar em:after {
  right: 13px;
  left: 2px;
  bottom: 10px;
  position: absolute;
}
<p class="calendar">7 <em></em></p>

Upvotes: 2

Related Questions