How to vertically align <details>'s arrow with <summary>'s content

Question

I am trying to vertically align the arrow that comes with the <details> element. As you can see in the demo below two things bother me:

1. the second line of the <summary> doesn't start at the same horizontal position as the first line.

2. the summary's text content isn't vertically aligned with the arrow.

details {
  font-size: 30px;
}

<details>
  <summary>Show more, you can click here on the summary's label to fold down the hidden menu</summary>
  Nothing to see here.
</details>

Current state:

Desired result:

summary {
  font-size: 30px;
  display: inline-block;
}

<details>
  <summary>
    <div>
      Show more, you can click here on the summary's label to fold down the hidden menu
    </div>
  </summary>
  Nothing to see here.
</details>

I have tried to wrap the summary content inside a div setting its property to inline-block but that only solved point 1.

Answer 1

You could implement your own foldable system. But the best way is to hack the details and summary elements a bit by removing the default arrow and placing a new one with the :before pseudo selector.

1. start off by hiding the default arrow:

   summary::-webkit-details-marker {
     display: none;
   }
   

2. then add your own arrows with the content property

   closed:

   summary:before {
     content: "►";
   }
   

   opened:

   details[open] summary:before {
     content: "▼";
   }
   

3. add a wrapping div element for our summary's text:

   Now our structure looks like:

   <summary>
     ::before
     <div>
       Show more, you can click here on the summary's label to fold down the hidden menu
     </div>
   </summary>
   

4. we need to align the ::before element with the div element:

   • set some width and margin to summary:before

   • set summary > div's display to inline-block to align the two blocks

   • let summary > div have the remaining horizontal space by using the CSS function calc:

     summary > div {
       width: calc(100% - 50px); /* 50px is the space taken by summary::before */
     }
     

   • to align the two blocks horizontally simply set vertical-align to middle

summary::-webkit-details-marker {
  display: none
}

summary > div {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: middle;
}

details {
  font-size: 20px;
}

summary {
  display: block
}

summary:before {
  content: "►";
  margin: 0px 10px 0 0;
  width: 20px;
}

details[open] summary:before {
  content: "▼";
}

<details>
    <summary><div>Show more, you can click here on the summary's label to fold down the hidden menu</div></summary>
    <div>Nothing to see here.</div>
</details>
<br>
<details>
    <summary><div>This is actually an even bigger summary text, and it works! The arrow on the left is perfectly positioned. Show more, you can click here on the summary's label to fold down the hidden menu</div></summary>
    <div>Nothing to see here.</div>
</details>