Align Crossmark with text in CSS-CodePudding

I'm trying to create a crossmark and a checkmark to align with the text behind. However, while the checkmark seems aligned well, the crossmark is to the top-right. Is there any way I can fix this reliably? I'm not sure if fiddling with margins and paddings would be smart, as that might break once the size of the screen changes.

.list {
    font-family: sans-serif;
    margin: 1rem 0 1rem !important;
}

.checkmark {
    transform: rotate(45deg);
    height: 24px;
    width: 12px;
    border-bottom: 7px solid lightgreen;
    border-right: 7px solid lightgreen;
}

.crossmark {
    height: 24px;
    width: 12px;
    position:relative;
}

.crossmark::after{
     position: absolute;
     content: '';
     width: 24px;
     height: 0px;
     border: solid orange;
     border-width: 0 0px 7px 0;
     transform: rotate(45deg);
     top:0;
 }

.crossmark::before{
     position: absolute;
     content: '';
     width: 24px;
     height: 0px;
     border: solid orange;
     border-width: 0 0px 7px 0;
     transform: rotate(-45deg);
     top:0;
 }

.highlighted-err {
    background-color: red;
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.highlighted-success {
    background-color: darkgreen;
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div  id="type-msg">

</div><div  id="size-msg">
    <div >
        <div ></div>
    </div><div >
        <div>Bild-Dateien müssen 600 x 450 Pixel oder größer sein.</div>
    </div>

</div><div  id="aspect-msg">
    <div >
        <div ></div>
    </div><div >
        <div>Bild-Dateien müssen eine Breite zu Höhe von 3:4 haben.</div>
    </div>
    
</div>

CodePudding user response：

in your crossmark before and after remove

   top:0;

replace in the 2 by

   top:12px;

You are making rotation 45deg and -45deg. Position element in center (crossmark 24px, so 12px center), and rotate. Transform origin rotate in center center for the element.