<article>
    <div class="content">    
        <p>加上<mark>里面添加内容就可以了</mark></p>
    </div>
</article>

{/collapse-item}

@keyframes highlight {
    to {
        background-position: 0;
    }
}

mark {
    animation: highlight linear forwards;
    animation-timeline: view(60% 20%);
    background: linear-gradient(
        to right,
        oklch(0.86 0.19 84.89 / 1) 50%,
        oklch(0.86 0.19 84.89 / 0) 50%
    );
    background-position: 100%;
    background-size: 200% 100%;
    border-radius: 0.125rem;
    padding-inline: 0.125rem;
}

* {
    box-sizing: border-box;
}

html {
    color: oklch(0.2 0.19 84.89 / 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 24px;
    line-height: 1.45;
}

body {
    margin: 0;
}

article {
    display: grid;
    min-height: 100svh;
    place-items: center;
    width: 100%;

    & .content {
        padding-block: 2rem 30svh;
        width: min(600px, 90vw);
    }

}

:is(h1, h2) {
    margin: 0;
    line-height: 1.1;
}

h2 {
    margin-block-start: 2rem;
}

{/collapse-item}