3 files changed, 43 insertions, 4 deletions
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 33772f9d..ddcb8415 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -40,6 +40,8 @@ Improvements::
   * Show safe modes in strictness order in CLI help (#4065)
   * Remove redundant styles from the default stylesheet
   * Update font styles for summary element in default stylesheet to match font styles of paragraph (#4114)
+  * Update default stylesheet to indent content of details element (#4116)
+  * Update default stylesheet to use custom marker to make appearance consistent (#4116)
   * Add Vietnamese translation of built-in attributes (PR #4066) (*@nguyenhoa93*)
   * Add Thai translation of built-in attributes (PR #4113) (*@ammaneena*)
 
diff --git a/data/stylesheets/asciidoctor-default.css b/data/stylesheets/asciidoctor-default.css
index 097691b5..fea799a9 100644
--- a/data/stylesheets/asciidoctor-default.css
+++ b/data/stylesheets/asciidoctor-default.css
@@ -184,7 +184,11 @@ body.toc2.toc-right{padding-left:0;padding-right:20em}}
 #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
 #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
 details,.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
-details>summary:first-of-type{cursor:pointer;display:list-item;outline:none;margin-bottom:.625rem}
+details{margin-left:1.25rem}
+details>summary{cursor:pointer;display:block;position:relative;line-height:1.6;margin-bottom:.625rem;-webkit-tap-highlight-color:transparent}
+details>summary::before{content:"";border:solid transparent;border-left:solid;border-width:.3em 0 .3em .5em;position:absolute;top:.5em;left:-1.25rem;transform:translateX(15%)}
+details[open]>summary::before{border:solid transparent;border-top:solid;border-width:.5em .3em 0;transform:translateY(15%)}
+details>summary::after{content:"";width:1.25rem;height:1em;position:absolute;top:.3em;left:-1.25rem}
 .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
 table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
 .paragraph.lead>p,#preamble>.sectionbody>[class=paragraph]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
diff --git a/src/stylesheets/asciidoctor.css b/src/stylesheets/asciidoctor.css
index 9da90644..3de3f402 100644
--- a/src/stylesheets/asciidoctor.css
+++ b/src/stylesheets/asciidoctor.css
@@ -1150,11 +1150,44 @@ details,
   margin-bottom: 1.25em;
 }
 
-details > summary:first-of-type {
+details {
+  margin-left: 1.25rem;
+}
+
+details > summary {
   cursor: pointer;
-  display: list-item;
-  outline: none;
+  display: block;
+  position: relative;
+  line-height: 1.6;
   margin-bottom: 0.625rem;
+  -webkit-tap-highlight-color: transparent;
+}
+
+details > summary::before {
+  content: "";
+  border: solid transparent;
+  border-left-color: currentColor;
+  border-width: 0.3em 0 0.3em 0.5em;
+  position: absolute;
+  top: 0.5em;
+  left: -1.25rem;
+  transform: translateX(15%);
+}
+
+details[open] > summary::before {
+  border: solid transparent;
+  border-top-color: currentColor;
+  border-width: 0.5em 0.3em 0;
+  transform: translateY(15%);
+}
+
+details > summary::after {
+  content: "";
+  width: 1.25rem;
+  height: 1em;
+  position: absolute;
+  top: 0.3em;
+  left: -1.25rem;
 }
 
 .admonitionblock td.content > .title,