css - Make text not wrap around icon in :before pseudoelement? -

i have icon in :before pseudoelement, , if textelement becomes long , goes next row, want not wrap around pseudoelement keep it's distance.

here link example: http://jsbin.com/yosevagaqa/1/edit?html,css,output

if resize window text forces new line, can see problem.

how can avoid this?

as can see other answers, there multiple solutions!

if size of square in :before same, 1 other solution add

.link {margin-left:25px; text-indent:-25px;} 

to css. causes entire block shifted right, except first line, containing square, gets "outdented".

http://jsfiddle.net/mrlister/3xbfyqkh/

or prefer, sizes in ems, red square depends on font size.

.link:before {   /* .. */   width: 1em; height: 1em;   margin-right: .5em; }  .link {margin-left:1.5em; text-indent:-1.5em;} 

making sure, of course, indentation same size + margin of square.

http://jsfiddle.net/mrlister/3xbfyqkh/1/

another approach, since purpose make custom "bullet", treat h5 list item. won't need ::before trick. need other tricks make square right size though...

.link {     display:list-item; list-style:square;     color:red;     font-size:2em; line-height:.5em;     margin:.5em 0 .5em 1em}  .link {     font-size:.417em; vertical-align:.3em} 

http://jsfiddle.net/mrlister/3xbfyqkh/5/