.extra {
    display: none;
}

p {
    display: block;
}

input[type="checkbox"] {
    display: block;
    appearance: none;
}

label {
    position: relative;
    box-sizing: border-box;
    color: black;
    cursor: pointer;
    text-decoration: underline;
}

label:before {
    content: "Show More";
}

input[type="checkbox"]:checked~label:before {
    content: "Show Less";
}

.extra:has(~ input[type="checkbox"]:checked) {
    display: inline;
}