0

So im trying to create a simple line on either side of a H1 element to create some style. When I change the top: 50%; style (51% and back to 50%) the line will be in the right place, but when I save the code in Atom, the lines will revert back as if there was no top style whatsoever. Any ideas?

.thankyou {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  font-family: var(--ff2);
  font-size: 5rem;
  font-style: italic;
}

.thankyou h1::before {
  content: "";
  background-color: var(--red);
  display: block;
  left: -30rem;
  bottom: 50%;
  width: 80%;
  height: 0.2rem;
  position: relative;
  z-index: 1;
}

.thankyou h1::after {
  content: "";
  background-color: var(--red);
  display: block;
  right: -30rem;
  top: 50% !important;
  width: 80%;
  height: 0.2rem;
  position: relative;
  z-index: 1;
}
<section class="thankyou">
  <h1>Thank You</h1>
</section>

As you can see, the line on the left has had the position changed from 50% to 51% and back to 50% which puts it in the right postion.

enter image description here

doğukan
  • 23,073
  • 13
  • 57
  • 69
Decisive Development
  • 57
  • 7
  • I have to wonder why you're using `display: flex` on the parent container, and instead of making use of that you choose to hack around with `position`, `left`, `right`... Just use `.thankyou::before` and `.thankyou::after` with `flex: 1 0 0;`... – Niet the Dark Absol Jul 02 '20 at 16:22
  • I used flexbox to centre the H1 text both vertically and horizontally - its worth adding i'm new to coding and this is the first time im trying to use psudeo from my own intuition – Decisive Development Jul 02 '20 at 16:25

0 Answers0