/*
Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before {content: "+";}
summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.
Для тега summary display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.
*/

summary::-webkit-details-marker {
    display: none;
}

summary::-moz-list-bullet {
    list-style-type: none;
}

summary::marker {
    display: none;
}

summary {
    display: inline-block;
    padding: .3em .5em .3em .4em;
    font-size: 1.4em;
    cursor: pointer;
}

    summary:before {
        content: "+";
        margin-right: .3em;
    }

details[open] > summary:before {
    content: "–";
}

summary ~ * {
    padding: 0 1em 0 1em;
}

summary:focus {
    outline: 0;
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}

details {
    display: block;
    margin-bottom: .5rem;
}