Psuedo Before Image and Text Wrapping

Question

p.note:before {
    content: "";
    width: 30px;
    height: 50px;
    float: left;
    margin: 0 6px 0 0;
    background: url(../images/note-icon.png) no-repeat;
}

.note {
    font-family:  arial, sans-serif !important; 
    background-color: transparent !important;
    border: 1px solid #6F1425 !important;
}

Hello,

I am trying to enforce the vertical height of a ::before pseudo-element (image of a notepad) before a body of text. Longer text wraps below the image however and I want to prevent this. Attempts to include an absolute height extends past/below the element into other content however.

Centering the image vertically before the text would be an acceptable alternative.

Reduce the viewing window of the below example (to force wrapping and additional lines of text) to see what I mean. Thank you

https://codepen.io/psuedobeforehelp/pen/YzGKVOB

Answer 1

You can do it like this. in before element you just need to put this code

position:absolute;
left:20px;
top:50%;   // THIS LINE OF CODE HERE CENTERS THE IMAGE 
transform:translateY(-50%); // THIS LINE OF CODE HERE CENTERS THE IMAGE 

And add position:relative; to your note class to prevent the before element from going somewhere.

p.note:before {
    content: "";
    width: 30px;
    height: 50px;
    margin: 0 6px 0 0;
    position: absolute;
    background: red;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.note {
    font-family:  arial, sans-serif !important; 
    background-color: transparent !important;
    border: 1px solid #6F1425 !important;
    position:relative;
    padding:20px 20px 20px 50px;
}

<p class="note"><span class="bold">Note</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>