| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| div.outer, div.inner, details, summary { border: solid 1px black;} | |
| details:after, summary:after { | |
| content: "after"; | |
| } | |
| details:before, summary:before { | |
| content: "before"; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <details open> | |
| <summary>Summary | |
| <div class="inner">Inner Div</div> | |
| </summary> | |
| Details | |
| </details> | |
| </body> | |
| </html> |