diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index 7fa40e55585f21afa9bfe4bceeda70f8789c223d..53cba224c629ac5f586c4cb266cf6b7ab81ced2e 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -164,6 +164,16 @@ details summary:focus {
   text-decoration: underline;
   outline: none;
 }
+/**
+ * Unfortunately, text-decoration for details summary is not supported on all
+ * browsers. So we add a span (which can handle text-decoration) in Seven's
+ * templates/details.html.twig. In case there are other details templates that
+ * don't have the span, we leave the text-decoration in the parent selector.
+ * This provides maximum compatibility and coverage with minimal disruption.
+ */
+details summary:focus span {
+  text-decoration: underline;
+}
 img {
   max-width: 100%;
   height: auto;
diff --git a/core/themes/seven/templates/details.html.twig b/core/themes/seven/templates/details.html.twig
index 8e30421eacaa292bbce2eb670c9b3c46b215049f..316dee2f63c52be21df4298e4cbd16bde76a321a 100644
--- a/core/themes/seven/templates/details.html.twig
+++ b/core/themes/seven/templates/details.html.twig
@@ -30,7 +30,7 @@
       ]
     %}
     <summary{{ summary_attributes.addClass(summary_classes) }}>
-      {{- title -}}
+      <span>{{ title }}</span>
     </summary>
   {%- endif -%}
   <div class="seven-details__wrapper details-wrapper">