Hallo,

ich hätte gerne zwischen dem Symbol und dem Text, der später in das DIV kommt, eine weiße Trennline, bekomms aber nicht hin.
Hatte schon versucht, ein zusätzliches Span einzubinden, aber dann gelang es mir nicht, die Trennlinie über das gesamte DIV zu erstrecken.

/* Der allgemeine Stil für alle Divs (erfolgreich oder Fehler) */
.success, .error_div, .info_div {
    cursor: url(inc/dropline/cross.gif), crosshair;
    position: fixed;
    top: -100px; /* Start-Position oben außerhalb des sichtbaren Bereichs */
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: opacity 0.5s ease, top 0.5s ease; /* Animation für top und opacity */
    opacity: 0; /* Start-Transparenz */
    z-index: 1000;
}

/* Fehlerhafte Div mit rotem Hintergrund */
.error_div {
    color: #ffffff;
    background: #E53935 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 24px;
    background-position: 10px center;
    padding-left: 40px;
    opacity: 1; /* Leicht transparent */
}

/* Zustand, wenn die Animation abgeschlossen ist und das Div sichtbar ist */
.success.show, .error_div.show , .info_div.show{
    top: 50px; /* Endposition des Divs nach der Animation */
    opacity: 1; /* Voll sichtbar */
}

Wie baue ich da eine dünne, weiße vertikale Trennlinie zwischen Symbol und Text ein?

Jörg