How to align image as pseudo element?

https://stackoverflow.com/questions/22589990

css
pseudo-element

19-06-2023
|

Question

<a class='flink'href='mc/index.php'>
<div class='cap_01'>323232323232</div>
<div class='cap_02'>52525252525252</div>
</a>

css

.cap_01:before{
    content: url('https://www.gravatar.com/avatar/c191bbf22d56f27dd1bc0128ea3b2844?s=24&d=identicon&r=PG&f=1');
    margin-right:9px;
    vertical-align:middle;

}
.cap_02{
    margin:5px 0 0 29px;
}

How can I adjust image in cap_01:before to be in the vertical middle with the text 323... ?

JSFIDDLE is here

Solution

Add display: inline-block; to the pseudo element.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow