diff --git a/css/main.css b/css/main.css
index 594219b..230e31f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -25,4 +25,30 @@
 
 .pagefind-ui__form::before {
     top: calc(16px * var(--pagefind-ui-scale)) !important;
+}
+
+@layer components {
+    .post-preview {
+        position: relative;
+        max-height: 14rem;
+    }
+
+    .post-preview > *:first-child {
+        margin-top: 0;
+    }
+
+    .post-preview > *:last-child {
+        margin-bottom: 0;
+    }
+
+    .post-preview::after {
+        position: absolute;
+        top: 12.25rem;
+        height: 1.75rem;
+        left: 0;
+        right: 0;
+        background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0) 70%);
+        content: " ";
+        border-bottom: 1px solid theme('colors.gray.200');
+    }
 }
\ No newline at end of file
diff --git a/templates/listing.jinja b/templates/listing.jinja
index 6c47a0f..3629f07 100644
--- a/templates/listing.jinja
+++ b/templates/listing.jinja
@@ -14,10 +14,14 @@
 {% for post in posts %}
 <div class="mb-8 prose break-words">
   <a href="/posts/{{post.id}}.html" class="no-underline">
-    <h3>{{ post.title }}</h3>
+    <h3 class="mb-5">{{ post.title }}</h3>
   </a>
-  <p>{% include "post_text.jinja" %}</p>
-  <p class="text-sm flex justify-between">
+  {% if post.selftext_html.is_some() || !post.selftext.is_empty() %}
+  <div class="overflow-hidden post-preview">
+    {% include "post_text.jinja" %}
+  </div>
+  {% endif %}
+  <p class="text-sm mt-5 flex justify-between">
     <a href="/posts/{{post.id}}.html">{{ post.real_num_comments }}
       Answers</a>
     <span class="text-gray-500">{{post.created_at.format("%F")}}</span>