Список персов

[html] <style>
.charlist {
width: 100%;
height: auto;
position: relative;
z-index: 4;

}

.charlist * {
box-sizing: border-box;
}

.charlist::before {
content: '';
width: 96%;
background: url(https://forumstatic.ru/files/001c/7f/90/17990.png) no-repeat top/ 100%;
height: 60px;
position: absolute;
display: block;
top: -27px;
left: 50%;
transform: translatex(-50%);
z-index: -1;
}

.charlist::after{
content: '';
width: 120px;
height: 120px;
top: -40px;
right: -12px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/7f/90/31153.png) no-repeat center / 100%;
z-index: 5;
pointer-events: none;
}

.charlist input[type="radio"] {
display: none;
}

.chartabs {
display: flex;
justify-content: center;
gap: 50px;
}

.chartab-label {
margin-bottom: 10px;
flex-shrink: 0;
padding: 2px 20px;
height: 20px;
width: fit-content;
border-radius: 50px;
background: rgba(177, 177, 177, 1);
text-align: center;
cursor: pointer;
position: relative;
transition: background 0.2s;
outline: 2px solid rgba(110, 99, 88, 0.23);
text-transform: lowercase;
font-family: Verdana;
font-weight: 400 !important;
font-size: 12px;
color: rgba(92, 92, 92, 1);
}

#chartab1:checked ~ .charcontent #charcontent1 {
display: block;
}

#chartab2:checked ~ .charcontent #charcontent2 {
display: grid;

}

.charcontent > div {
display: none;
background: white;
padding: 20px;
border-radius: 5px 5px 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#chartab1:checked ~ .chartabs label[for="chartab1"],
#chartab2:checked ~ .chartabs label[for="chartab2"] {
background: rgba(110, 125, 75, 1);
outline: 2px solid rgba(110, 99, 88, 0.23);
color: white;
}

lt {
display: flex;
font-weight: 700;
font-size: 14px;
width: 25px;
height: 25px;
margin: 20px 0 15px!important;
position: relative;
border-radius: 50%;
border: 1px dashed gray;
align-items: center;
justify-content: center;
break-inside: avoid;
}

lt:first-of-type {
margin-top: 0px!important;
}

lt::before {
content:'';
border-bottom: 1px dashed gray;
width: 150px;
height: 1px;
display: block;
position: absolute;
left: 25px;
top: 50%;
transform: translatey(-50%);
}

#charcontent1 {
white-space: pre-line;
columns: 2;
padding: 20px 20px 20px 140px;

}

#charcontent2 {
grid-template-columns: repeat(5, 1fr);
gap: 20px;
grid-auto-rows: auto;
width: 100%;
}

#charcontent2 input {
height: 20px;
border-radius: 4px;
background: rgb(var(--canvas-post-body));
width: 170px;
}

#charcontent2 charcont {
background: rgb(var(--canvas-secondary-rgb));
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border-radius: 10px;
font-size: 11px;
text-transform: lowercase;
color: rgb(var(--text-primary), .5);
text-align: left;
}

#charcontent2 > span {
grid-column: span 5;
text-align: center;
font-size: 15px;
height: 4px;
font-weight: 900;
text-transform: uppercase;
font-family: 'Pragmatica';
color: rgb(var(--gray-text));
}

#charcontent2 > button {
grid-column: span 5;
text-align: center;
font-size: 11px;
height: 20px;
border: none;
cursor: pointer;
padding: 3px 25px;
width: fit-content;
justify-self: center;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Pragmatica';
color: rgb(var(--gray-text));
box-shadow: 0 0 0px rgba(0,0,0,0);
transition: .3s ease-in-out;
}

#charcontent2 > button:hover {
color: rgb(0, 0, 0, .6);
background: rgb(var(--accent), .4);
box-shadow: 0 0 5px rgba(0,0,0,0.1);

}
#charcontent2 a {
width: 100%;
text-align: center;
height: 24px;
border-bottom: 1px dashed grey;
padding-bottom: 7px;
}

</style>

<div class="chartabs">
<label for="chartab1" class="chartab-label">список внешностей </label>
<label for="chartab2" class="chartab-label">список персонажей </label>
</div>

<div class="charcontent">

<div id="charcontent1">
<lt> A </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> B </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> C </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> D </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> E </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> F </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> G </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> H </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> I </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
<lt> J </lt>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
Name Surname - <a href='#'> Charname Charsurname </a>
</div>