Created
July 28, 2022 21:22
-
-
Save Maxondria/2ca9d7a5d4184959c74a5e97b73be2af to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| </head> | |
| <style> | |
| body { | |
| box-sizing: border-box; | |
| margin: 0 auto; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| div { | |
| background-color: hsl(200, 70%, 30%); | |
| width: 200px; | |
| height: 200px; | |
| color: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 2rem; | |
| } | |
| div { | |
| /* transform: rotate(74deg); */ | |
| /* transform: scale(1.5, 2); */ | |
| /* transform: translate(30px, -40px); */ | |
| /* transform: translate(100%); */ | |
| position: relative; | |
| } | |
| /* completely and perfectly center the after element in the parent element */ | |
| div::after { | |
| content: "After"; | |
| background-color: red; | |
| position: absolute; | |
| top: -12px; /* negative value moves it up the relative element, making it perfectly positioned at the top */ | |
| left: 50%; /* 50% the width of the relative element */ | |
| transform: translate( | |
| -50% | |
| ); /* 50% of the element's real width meaning, centered perfectly */ | |
| } | |
| </style> | |
| <body> | |
| <div>Box</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment