feat: pseudo elements

Author: Uribouz

starter/03-CSS-Fundamentals/style.css

@@ -244,3 +244,46 @@ button {
   bottom: 50px;
   right: 50px;
 }
+
+/* * Pseudo Element (use double colon "::" */
+h1::first-letter {
+  font-style: normal;
+  margin-right: 5px;
+}
+
+/* p::first-line {
+  color: red;
+} */
+
+/* * Adjacent sibling selector:
+ * is the selector of the element that share  the same parent.
+*/
+h3 + p::first-line {
+  color: red;
+}
+
+h2 {
+  /* background-color: orange; */
+  position: relative;
+}
+
+/* * Pseudo element: first child element of the parent "h2" */
+h2::before {
+}
+
+/* * Pseudo element: last child element of the parent "h2" */
+h2::after {
+  content: "TOP";
+  background-color: #ffe70e;
+  color: #444;
+  font-size: 16px;
+  font-weight: bold;
+  display: inline-block;
+  padding: 5px 10px;
+  position: absolute;
+  /* * Negative Length:
+  * It will move to the opposite direction of specify attributes.
+  * */
+  top: -10px;
+  right: -25px;
+}