Added pseudo element to the post title, being a TOP post label, using ::before.

Author: mirmak4

starter/03-CSS-Fundamentals/index.html

@@ -18,7 +18,7 @@ <h6>The Basic Language of the Web: HTML</h6>
 
         <div class="container">
             <header class="main-header">
-                <h1>📘 The Code Magazine</h1>
+                <h1 class="website-title">📘 The Code Magazine</h1>
 
                 <nav>
                     <!-- <strong>This is navigation</strong> -->
@@ -31,7 +31,9 @@ <h1>📘 The Code Magazine</h1>
 
             <article>
                 <header class="post-header">
-                    <h2>The Basic Language of the Web: HTML</h2>
+                    <h2 class="post-title">
+                        The Basic Language of the Web: HTML
+                    </h2>
 
                     <img
                         src="img/laura-jones.jpg"

starter/03-CSS-Fundamentals/style.css

@@ -231,6 +231,34 @@ nav a:link:last-child {
     right: 50px;
 }
 
+.website-title::first-letter {
+    font-style: normal;
+    margin-right: 5px;
+}
+
+/*  Adjacent Sibling  */
+h3 + p::first-line {
+    /* color: red; */
+}
+
+.post-title {
+    /* background-color: orange; */
+    position: relative;
+}
+
+.post-title::before {
+    content: "TOP";
+    background-color: #ffe70e;
+    color: #444;
+    font-size: 16px;
+    font-weight: bold;
+    display: inline-block;
+    padding: 5px 10px;
+    position: absolute;
+    top: -15px;
+    right: -25px;
+}
+
 /*  Resolving conflicts  */
 #copyright {
     color: yellow;