pure css mindmap with nest list element.

index.html

<div class="topic">
  topics
	<ul>	
		<li>this is a long subtopic and conetent</li>
		<li>topic2</li>
		<li>topic3</li>
		<li>topic4</li>
		<li>topic5</li>
		<li>topic6 it's also very long</li>
		<li>topic7</li>
		<li>topic8</li>
		<li>topic9</li>
		<li>topic10</li>
		<li>topic11</li>
		<li>topic12</li>
		<li>topic13</li>
	</ul>
</div>

style.css

.topic{
  display: block; position: relative; z-index: 1;
	padding:.5em; 
	width: 25em;
	border:solid 1px black; 
	text-align:right; vertical-align: middle; white-space:nowrap; 
	background: pink;
}
.topic:before{
	content: ""; display: block; background: yellow; position: absolute; z-index: -1;
	top: 0; right: 0; bottom: 0; left: 0;
	margin:auto;
	width: 5em; height: 2.5em;
}

ul{
	display: inline-block; position:relative; overflow: hidden; z-index: -2; 
	left: -100%;
	margin:0 -100% 0 45%; padding:0; /*position */
	width: 100%;
	vertical-align: middle;
	background:rgba(255,0,0,.4);
}
ul>li{
	display:block; position: relative; float: right;
	margin:.25em 0; padding: .5em;	
	width:8em; height:auto; 
	vertical-align: top; white-space:normal; word-wrap: break-word;  text-align: center;
	background:rgba(0,0,0,.3); 0background: gray;
}
ul>li:before,
ul>li:after{
	content: ""; display:block; position: absolute; z-index: -1;
	border:solid white 0;
	width:0; height:20em;	
	top:0; right: 0; bottom:auto; left:0;
	margin: auto;	
}

ul>li:nth-child(even){
	float: left; clear: left;
}
ul>li:nth-child(even):before,
ul>li:nth-child(even):after{
	right: -45em; left:-37em; /*negative for overwidth ccenter*/
	border-width: 0 .2em 0 0;
}

ul>li:nth-child(odd){
	float: right; clear: right;
}
ul>li:nth-child(odd):before,
ul>li:nth-child(odd):after{
	right: -37em; left:-45em; /*negative for overwidth ccenter*/
	border-width: 0 0 0 .2em; 
}

/* 

css half select skill 

by Defims

1 *   #
2  * #
3   @
4  # *
5 #   *

1&5 set
2&4 set
3&3 set   3 cover 3
4&2 set   4 cover 2 2 cover 4
5&1 set   5 cover 1 1 cover 5

because the css cover feather it seems like start from the half (3 for odd)
and no matter how many children there is (below max), it works fine
*/


/*select half even last-child*/
ul>li:nth-child(odd):nth-last-child(1),
ul>li:nth-child(odd):nth-last-child(2){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(1):before,
ul>li:nth-child(odd):nth-last-child(2):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(1):after,
ul>li:nth-child(odd):nth-last-child(2):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 1em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(1){ background:gold;  }
ul>li:nth-child(odd):nth-child(1):before{ display: block; width: 1em;}
ul>li:nth-child(odd):nth-child(1):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 1em; height: 1em; border-radius:0 0 0 1em; }

ul>li:nth-child(odd):nth-last-child(3),
ul>li:nth-child(odd):nth-last-child(4){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(3):before,
ul>li:nth-child(odd):nth-last-child(4):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(3):after,
ul>li:nth-child(odd):nth-last-child(4):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 2em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(3){ background:gold; }
ul>li:nth-child(odd):nth-child(3):before{ display: block; width: 2em;}
ul>li:nth-child(odd):nth-child(3):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 2em; height: 1em; border-radius:0 0 0 1em;}

ul>li:nth-child(odd):nth-last-child(5),
ul>li:nth-child(odd):nth-last-child(6){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(5):before,
ul>li:nth-child(odd):nth-last-child(6):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(5):after,
ul>li:nth-child(odd):nth-last-child(6):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 3em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(5){ background:gold; }
ul>li:nth-child(odd):nth-child(5):before{ display: block; width: 3em; }
ul>li:nth-child(odd):nth-child(5):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 3em; height: 1em; border-radius:0 0 0 1em;}

ul>li:nth-child(odd):nth-last-child(7),
ul>li:nth-child(odd):nth-last-child(8){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(7):before,
ul>li:nth-child(odd):nth-last-child(8):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(7):after,
ul>li:nth-child(odd):nth-last-child(8):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 4em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(7){ background:gold; }
ul>li:nth-child(odd):nth-child(7):before{ display: block; width: 4em; }
ul>li:nth-child(odd):nth-child(7):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 4em; height: 1em; border-radius:0 0 0 1em;}

ul>li:nth-child(odd):nth-last-child(9),
ul>li:nth-child(odd):nth-last-child(10){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(9):before,
ul>li:nth-child(odd):nth-last-child(10):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(9):after,
ul>li:nth-child(odd):nth-last-child(10):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 5em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(9){ background:gold; }
ul>li:nth-child(odd):nth-child(9):before{ display: block; width: 5em; }
ul>li:nth-child(odd):nth-child(9):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 5em; height: 1em; border-radius:0 0 0 1em; }

ul>li:nth-child(odd):nth-last-child(11),
ul>li:nth-child(odd):nth-last-child(12){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(11):before,
ul>li:nth-child(odd):nth-last-child(12):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(11):after,
ul>li:nth-child(odd):nth-last-child(12):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 6em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(11){ background:gold; }
ul>li:nth-child(odd):nth-child(11):before{ display: block; width: 6em; }
ul>li:nth-child(odd):nth-child(11):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 6em; height: 1em; border-radius:0 0 0 1em; }

ul>li:nth-child(odd):nth-last-child(13),
ul>li:nth-child(odd):nth-last-child(14){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(13):before,
ul>li:nth-child(odd):nth-last-child(14):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(13):after,
ul>li:nth-child(odd):nth-last-child(14):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 7em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(13){ background:gold; }
ul>li:nth-child(odd):nth-child(13):before{ display: block; width: 7em; }
ul>li:nth-child(odd):nth-child(13):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 7em; height: 1em; border-radius:0 0 0 1em; }

ul>li:nth-child(odd):nth-last-child(15),
ul>li:nth-child(odd):nth-last-child(16){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(15):before,
ul>li:nth-child(odd):nth-last-child(16):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(15):after,
ul>li:nth-child(odd):nth-last-child(16):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 8em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(15){ background:gold; }
ul>li:nth-child(odd):nth-child(15):before{ display: block; width: 8em; }
ul>li:nth-child(odd):nth-child(15):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 8em; height: 1em; border-radius:0 0 0 1em; }

ul>li:nth-child(odd):nth-last-child(17),
ul>li:nth-child(odd):nth-last-child(18){ background:lightblue; }
ul>li:nth-child(odd):nth-last-child(17):before,
ul>li:nth-child(odd):nth-last-child(18):before{ display: none; }
ul>li:nth-child(odd):nth-last-child(17):after,
ul>li:nth-child(odd):nth-last-child(18):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 9em; height:20em; border-radius:1em 0 0 0; }
ul>li:nth-child(odd):nth-child(17){ background:gold; }
ul>li:nth-child(odd):nth-child(17):before{ display: block; width: 9em; }
ul>li:nth-child(odd):nth-child(17):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 9em; height: 1em; border-radius:0 0 0 1em; }


/*left column*/
ul>li:nth-child(even):nth-last-child(2),
ul>li:nth-child(even):nth-last-child(1){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(2):before,
ul>li:nth-child(even):nth-last-child(1):before{ display: none; }
ul>li:nth-child(even):nth-last-child(2):after,
ul>li:nth-child(even):nth-last-child(1):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 1em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(2){ background:gold;  }
ul>li:nth-child(even):nth-child(2):before{ display: block; width: 1em;}
ul>li:nth-child(even):nth-child(2):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 1em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(4),
ul>li:nth-child(even):nth-last-child(3){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(4):before,
ul>li:nth-child(even):nth-last-child(3):before{ display: none; }
ul>li:nth-child(even):nth-last-child(4):after,
ul>li:nth-child(even):nth-last-child(3):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 2em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(4){ background:gold; }
ul>li:nth-child(even):nth-child(4):before{ display: block; width: 2em;}
ul>li:nth-child(even):nth-child(4):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 2em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(6),
ul>li:nth-child(even):nth-last-child(5){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(6):before,
ul>li:nth-child(even):nth-last-child(5):before{ display: none; }
ul>li:nth-child(even):nth-last-child(6):after,
ul>li:nth-child(even):nth-last-child(5):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 3em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(6){ background:gold; }
ul>li:nth-child(even):nth-child(6):before{ display: block; width: 3em; }
ul>li:nth-child(even):nth-child(6):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 3em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(8),
ul>li:nth-child(even):nth-last-child(7){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(8):before,
ul>li:nth-child(even):nth-last-child(7):before{ display: none; }
ul>li:nth-child(even):nth-last-child(8):after,
ul>li:nth-child(even):nth-last-child(7):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 4em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(8){ background:gold; }
ul>li:nth-child(even):nth-child(8):before{ display: block; width: 4em; }
ul>li:nth-child(even):nth-child(8):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 4em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(10),
ul>li:nth-child(even):nth-last-child(9){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(10):before,
ul>li:nth-child(even):nth-last-child(9):before{ display: none; }
ul>li:nth-child(even):nth-last-child(10):after,
ul>li:nth-child(even):nth-last-child(9):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 5em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(10){ background:gold; }
ul>li:nth-child(even):nth-child(10):before{ display: block; width: 5em; }
ul>li:nth-child(even):nth-child(10):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 5em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(12),
ul>li:nth-child(even):nth-last-child(11){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(12):before,
ul>li:nth-child(even):nth-last-child(11):before{ display: none; }
ul>li:nth-child(even):nth-last-child(12):after,
ul>li:nth-child(even):nth-last-child(11):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 6em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(12){ background:gold; }
ul>li:nth-child(even):nth-child(12):before{ display: block; width: 6em; }
ul>li:nth-child(even):nth-child(12):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 6em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(14),
ul>li:nth-child(even):nth-last-child(13){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(14):before,
ul>li:nth-child(even):nth-last-child(13):before{ display: none; }
ul>li:nth-child(even):nth-last-child(14):after,
ul>li:nth-child(even):nth-last-child(13):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 7em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(14){ background:gold; }
ul>li:nth-child(even):nth-child(14):before{ display: block; width: 7em; }
ul>li:nth-child(even):nth-child(14):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 7em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(16),
ul>li:nth-child(even):nth-last-child(15){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(16):before,
ul>li:nth-child(even):nth-last-child(15):before{ display: none; }
ul>li:nth-child(even):nth-last-child(16):after,
ul>li:nth-child(even):nth-last-child(15):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 8em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(16){ background:gold; }
ul>li:nth-child(even):nth-child(16):before{ display: block; width: 8em; }
ul>li:nth-child(even):nth-child(16):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 8em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(18),
ul>li:nth-child(even):nth-last-child(17){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(18):before,
ul>li:nth-child(even):nth-last-child(17):before{ display: none; }
ul>li:nth-child(even):nth-last-child(18):after,
ul>li:nth-child(even):nth-last-child(17):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 9em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(18){ background:gold; }
ul>li:nth-child(even):nth-child(18):before{ display: block; width: 9em; }
ul>li:nth-child(even):nth-child(18):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 9em; height: 1em; border-radius:0 0 1em 0; }

ul>li:nth-child(even):nth-last-child(20),
ul>li:nth-child(even):nth-last-child(19){ background:lightblue; }
ul>li:nth-child(even):nth-last-child(20):before,
ul>li:nth-child(even):nth-last-child(19):before{ display: none; }
ul>li:nth-child(even):nth-last-child(20):after,
ul>li:nth-child(even):nth-last-child(19):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 10em; height:20em; border-radius:0 1em 0 0; }
ul>li:nth-child(even):nth-child(20){ background:gold; }
ul>li:nth-child(even):nth-child(20):before{ display: block; width: 10em; }
ul>li:nth-child(even):nth-child(20):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 10em; height: 1em; border-radius:0 0 1em 0; }


ul>li:after{  border-color:gray; }

/*decoration*/
.topic{ background: white; border: none; font-family: "Verdana"; }
.topic:before{ border-radius: 1em;	box-shadow:inset 0 0 .2em rgba(0,0,0,.5); border: solid rgba(0,0,0,.3) 1px; background: gold; }
ul{ background: white; }
ul>li{ box-shadow: inset 0 0 .2em rgba(0,0,0,.5); 	border-radius: .25em; }
ul>li:after{ }