How to vertically align 's arrow with 's content

Question

I am trying to vertically align the arrow that comes with the

element. As you can see in the demo below two things bother me:

1. the second line of

Answer 1

You can also rely on flexbox and keep the default behavior:

summary {
  font-size: 30px;
  display: flex;
  align-items:center;
}
summary > div {
  width:100%;
}

<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>

Answer 2

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>