Is there a way to display a message inside a div with an icon positioned to the left?
The desired outcome is for the icon to always be next to the text and aligned at the bottom-center of the div.
https://i.sstatic.net/RnZMq.png https://i.sstatic.net/aSRS9.png
I attempted using the :after pseudo element. However, setting the position to absolute for the icon did not work as it required manual adjustment for positioning relative to the text.
https://i.sstatic.net/tVY8z.png https://i.sstatic.net/56KHq.png
Below is the CSS used:
.parent{
font-weight: 500;
height: 65px;
text-align: center;
padding: 15px 0 10px;
margin: auto;
display: block;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.parent > div {
float: none;
/* display: table-cell; */
vertical-align: middle;
position: absolute;
bottom: 0;
width: 100%;
}
.msg:after {
content: '';
background: url(data:image/...);
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 0;
padding-right: 5px;
left: 108px;
}
Here's the markup:
<div class="parent">
<div class="msg">text goes here</div>
</div>