Positions, Float, Media Queries - ::before and ::after Basics

pktcodes · pktcodes · commit ad6b44ce6f04 · 2022-11-07T22:02:55.000-06:00
diff --git a/index.html b/index.html
@@ -11,14 +11,6 @@
   </head>
 
   <body>
-    <div class="banner">
-      <img src="./small.jpeg" alt="small retro" class="first-image" />
-      <img src="./big.jpeg" alt="big retro" class="second-image" />
-      <img
-        src="./images/folder-img.jpeg"
-        alt="folder retro"
-        class="third-image"
-      />
-    </div>
+    <p>I'm extremely simple</p>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,37 +1,25 @@
 /* 
-z-index --- z-axis
-0 - default
-does not work on position:static;
+::before ::after pseudo-elements creates element and inserts before and after CONTENT
+content:'' - required
+img --- does not work
 */
 
-img {
-  width: 250px;
-  height: 250px;
-  position: absolute;
+p::before {
+  content: "hello world";
+  font-size: 2rem;
+  color: blue;
+  font-weight: 700;
+  display: block;
+  background: yellow;
 }
 
-.banner {
-  position: relative;
-  border: 5px solid red;
-  width: 80vw;
-  height: 75vh;
-  margin: 50px auto;
-}
-
-.first-image {
-  top: 0;
-  left: 0;
-  z-index: 3;
-}
-
-.second-image {
-  top: 10%;
-  left: 10%;
-  z-index: 2;
-}
-
-.third-image {
-  top: 20%;
-  left: 20%;
-  z-index: -1;
+p::after {
+  content: "";
+  font-size: 1rem;
+  color: red;
+  font-weight: 700;
+  background: greenyellow;
+  display: block;
+  width: 100%;
+  height: 3rem;
 }
