How to position <detail> marker to come after <summary>

user_93933 0
Viewed 5019

I have several data items, some of which have Details & Summary tags, which reveal extra input options. Standard HTML puts the details marker on the left, which breaks the alignment. I would like to move the details marker to come after the Summary text. In the image below, I would like to move the triangle to the right of "Title: Book Club"

enter image description here enter image description here

<details>
<summary> Title: Book Club</summary>
This revealed area tells more about the course and maybe has a form in it.
</details>

Related: How to properly position the arrow in <details> CSS

css html
2 Answers

You can hide the default arrow and replace it with your own:

details>summary {
 
  list-style: none;
}
summary::-webkit-details-marker {
  display: none
}

summary::after {
  content: ' ►';
}
details[open] summary:after {
  content: " ▼";
}
<details>
  <summary> Title: Book Club</summary>
  This revealed area tells more about the course and maybe has a form in it.
</details>

user_6164430

The accepted answer is the best choice, here's an alternative that uses transform: scaleX(-1) to flip elements so they display as a mirror image.

  1. Add a <b> inside <summary>. Any text should be inside the <b>.

  2. Assign position: relative and transform: scaleX(-1) to <summary>.

  3. Assign display: inline-block, position: absolute, right: 6px, and transform: scaleX(-1) to the <b>.

    Almost any flow or phrasing content type element, it doesn't have to be a <b>.
    Actual length may vary, 6px is a length that looks acceptable with these particular styles.

Note: The original solution involved the use of ::-webkit-details-marker which is now deprecated. Refer here for what to use in place of ::-webkit-details-marker

:root {
  font: 400 small-caps 3vw/1.2 'Segoe UI'
}

summary {
  position: relative;
  border: 2.5px inset grey;
  padding: 6px;
  cursor: pointer;
  transform: scaleX(-1);
}

summary b {
  display: inline-block;
  position: absolute;
  right: 6px;
  transform: scaleX(-1);
}

label {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin: 2.5vh auto;
}

i {
  font-weight: 700;
}
<details>
  <summary>
    <b>Book Club</b>
  </summary>
  <label><i>Game of Thrones,</i> <cite>George R. R. Martin</cite></label>
  <label><i>Chronicles of Amber,</i> <cite>Roger Zelazny</cite></label>
  <label><i>Tales of the Dying Earth,</i> <cite>Jack Vance</cite></label>
  <label><i>Stranger in a Strange Land,</i> <cite>Robert A. Heinlein</cite></label>
</details>

user_28132240
Related