Как выбрать и расположить содержимое <details>без выбора <summary>, используя только CSS

Question

Я пытаюсь добавить 10px отступ в поле Story, используя CSS, без , добавляя любые новые дополнительные элементы HTML к коду сайта.

Есть ЛЮБОЙ способ добавить заполнение в поле «История», не добавляя новый дополнительный элемент HTML?

Другими словами: Как выбрать ТОЛЬКО поле «История», используя только CSS, без выбора части <summary> с Это? (Мне нравится текущий макет <summary>, я не хочу ничего там менять.)

Спасибо!

details {
  overflow: hidden;
  padding: 0px;
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  user-select: none
}

<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

Answer 1

При нажатии на элемент сводки к элементу подробностей добавляется атрибут - «открыть». Вы можете использовать css для назначения атрибутов с помощью квадратных скобок - [open]. Я добавил css, чтобы добавить отступ к элементу details при удалении его из сводки при наличии атрибута.

details {
  overflow: hidden;
  padding: 0px;
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  user-select: none
}

details[open] {
  padding: 10px;
}

details[open] summary {
  padding: 0 0 10px;
}

<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

Answer 2

Вы можете применить заполнение ко всему элементу и учесть отрицательное поле в сводке, чтобы отключить его.

Пример с 20px, чтобы лучше видеть:

details {
  overflow: hidden;
  padding: 20px; /* the padding here */
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  margin:-20px; /* negative margin here */
  user-select: none
}
details[open] summary {
  margin-bottom:20px; /* the bottom the same as padding*/
}

<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>