html - How to define absolute positioned element's anchor point? -

is possible define positioned element's anchor point without css transformations ?

i want place arrow before variable centered div, have define offset (left: -20px;).

if increase font size, gap between arrow , block wouldn't proportionate more.

how can define absolute positioned element's anchor top right corner instead of top left ?

html :

<div id="block">       <div id="arrow">&larr;</div> </div> 

css :

#block {    height: 20px;    width : 40px;    margin: 0 auto;    border: 1px solid black;    position: relative; }  #arrow {    position: absolute;    left: -20px;    top : 0; } 

in example block of fixed width, in code variable. might need adiffrent solution.

http://jsfiddle.net/j7xnb/1/

thank !

you can achieve using em unit of measurement, rather absolute pixels:

#block {     font-size: 16px;     height: 1em;     width: 2.5em;     margin: 0 auto;     border: 1px solid black;     position: relative; }  #arrow {     position: absolute;     left: -1em;     top: 0; } 

using em measure height , width of #block has added advantage if font size changed, box resizes fit text accordingly.

you can see working here: http://jsfiddle.net/j7xnb/2/

(just change font-size property see change.)