Align Crossmark with text in CSS - html

Question

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/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row list" id="type-msg">
</div><div class="row list highlighted-success" id="size-msg">
<div class="col-md-1">
<div class="checkmark"></div>
</div><div class="col-md-11">
<div>Bild-Dateien müssen 600 x 450 Pixel oder größer sein.</div>
</div>
</div><div class="row list highlighted-err" id="aspect-msg">
<div class="col-md-1">
<div class="crossmark"></div>
</div><div class="col-md-11">
<div>Bild-Dateien müssen eine Breite zu Höhe von 3:4 haben.</div>
</div>
</div>

Answer 1

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.

Answer 2

Your absolute positioning with top: 0; forced the before and after elements to the top of the parent.
By switching it to top: 50%; and adding translate(0, -50%) to each transform, you effectively center both elements within the parent element.
This will work even if you start changing the values of the fixed widths and heights.
.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: translate(0, -50%) rotate(45deg);
top: 50%;
}
.crossmark::before{
position: absolute;
content: '';
width: 24px;
height: 0px;
border: solid orange;
border-width: 0 0px 7px 0;
transform: translate(0, -50%) rotate(-45deg);
top: 50%;
}
.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/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row list" id="type-msg">
</div><div class="row list highlighted-success" id="size-msg">
<div class="col-md-1">
<div class="checkmark"></div>
</div><div class="col-md-11">
<div>Bild-Dateien müssen 600 x 450 Pixel oder größer sein.</div>
</div>
</div><div class="row list highlighted-err" id="aspect-msg">
<div class="col-md-1">
<div class="crossmark"></div>
</div><div class="col-md-11">
<div>Bild-Dateien müssen eine Breite zu Höhe von 3:4 haben.</div>
</div>
</div>