Showing icon next to text using CSS with ::before selector - text not aligning properly

Question

Here is a minimal version of my code:

<html>

<head>
    <style>
        div.tip {
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid transparent;
            border-radius: 7px;
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
            display: flex;
            width: 700px;
            text-align: justify;
            min-height: 30px;
        }

        .tip::before {
            content: "";
            background-image: url("https://image.flaticon.com/icons/svg/702/702797.svg");
            background-repeat: no-repeat;
            background-size: 30px;
            width: 30px;
            background-position-y: center;
            padding-right: 30px;
        }
    </style>
</head>

<body>
    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>
</body>

</html>

If you run the snippet you will see that the text aligns at different places horizontally depending on how many lines are in the text. How can I fix this so that the text always aligns at the same position next to the icon? Thanks!

@Asutosh he's using flex – Temani Afif Aug 22 '20 at 13:54 — Temani Afif, Aug 22 '20 at 13:54
flex-shrink:0 to the pseudo element – Temani Afif Aug 22 '20 at 13:55 — Temani Afif, Aug 22 '20 at 13:55

s.kuznetsov · Accepted Answer · 2020-08-22T17:32:52.410

0

insert flex: none in .tip::before

<html>

<head>
    <style>
        div.tip {
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid transparent;
            border-radius: 7px;
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
            display: flex;
            width: 700px;
            text-align: justify;
            align-items: center;
            position: relative;
            margin: auto;
        }

        .tip::before {
            content: "";
            background-image: url("https://image.flaticon.com/icons/svg/702/702797.svg");
            background-repeat: no-repeat;
            background-size: 30px;
            width: 30px;
            min-height: 35px;
            background-position-y: center;
            padding-right: 30px;
            flex: none;
        }
        .tip hr {
            width: 30px;
            height: 0;
            transform: rotate(90deg);
            position: absolute;
            margin: 0;
            box-sizing: border-box;
            border: 1px solid black;
            left: 35px;
        } 
    </style>
</head>

<body>
    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>
</body>

</html>

edited Aug 22 '20 at 17:32

answered Aug 22 '20 at 13:54

s.kuznetsov

14,870
3
10
25

Done! Also, do you have any idea how I can center the text vertically when there is only one line? I tried to look it up, but did not find anything useful. – Aug 22 '20 at 14:14
(after adding `min-height: 30px;`) – Aug 22 '20 at 14:14
I want to suggest improving your code a little. You have another problem. here it is in the screenshot - https://ibb.co/6bzKZwG. the height of your icon adjusts to the height of the text - and that's not correct. in order to eliminate do the following: in `.tip :: before` add `min-height: 35px`, and in `div.tip` add `align-items: center;` – s.kuznetsov Aug 22 '20 at 14:17
I have updated the answer. Your text is now vertically centered and the icon does not fade away with small text. Check, please. – s.kuznetsov Aug 22 '20 at 14:22
Works perfectly and much improved, thanks again! :) Last question, how do I add a vertical separator line between the icon and the text? – Aug 22 '20 at 14:32
you can use the hr tag. i updated answer – s.kuznetsov Aug 22 '20 at 14:56
Sorry, now I am facing another problem that I don't know how to fix... I'm trying to align the tip box to the center using `margin: auto`, but this makes the line appear in a completely different place. How can I center the boxes while keeping the line in the correct place? – Aug 22 '20 at 16:25
I'll answer later. wait please – s.kuznetsov Aug 22 '20 at 17:05
check answer pls – s.kuznetsov Aug 22 '20 at 17:33
I added `position: relative` and in `div.tip` and `left: 35px` in `.tip hr` – s.kuznetsov Aug 22 '20 at 17:43
Great! You're a lifesaver :) – Aug 22 '20 at 21:58
Nice to hear that. Thank you, bro :)) – s.kuznetsov Aug 23 '20 at 04:49

Showing icon next to text using CSS with ::before selector - text not aligning properly

1 Answers1