styles.css

/* https://codepen.io/WartClaes/pen/QGGPJL */

.json {
	 font-family: 'Source Code Pro', monospace;
	 font-size: 16px;
}
 .json > .json__item {
	 display: block;
}
 .json__item {
	 display: none;
	 margin-top: 10px;
	 padding-left: 20px;
	 user-select: none;
}
 .json__item--collapsible {
	 cursor: pointer;
	 overflow: hidden;
	 position: relative;
}
 .json__item--collapsible::before {
	 content: '+';
	 position: absolute;
	 left: 5px;
}
 .json__item--collapsible::after {
	 background-color: lightgrey;
	 content: '';
	 height: 100%;
	 left: 9px;
	 position: absolute;
	 top: 26px;
	 width: 1px;
}
 .json__item--collapsible:hover > .json__key, .json__item--collapsible:hover > .json__value {
	 text-decoration: underline;
}
 .json__toggle {
	 display: none;
}
 .json__toggle:checked ~ .json__item {
	 display: block;
}
 .json__key {
	 color: darkblue;
	 display: inline;
}
 .json__key::after {
	 content: ': ';
}
 .json__value {
	 display: inline;
}
 .json__value--string {
	 color: green;
}
 .json__value--number {
	 color: blue;
}
 .json__value--boolean {
	 color: red;
}