CSS: Jak neposunout prvky inline, při změně width jednoho prvku na hoveru?

Ahoj,

dokázal by někdo poradit, jak vyřešit tenhle design?

Mám inline block, kde mám odkazy a před každým odkazem je šipka. Na hoveru mám animaci na zvětšení width té šipky. Problém je, že to logicky posune celou řadu.



Hover vypadá následovně (foto je z designu. V real projektu to posouvá celou řadu a vypadá to hrozně).



Napadlo mě přiřadit odkazům specifický width. Třeba 200px, aby tam byl space na to zvětšení. Pak to funguje jak potřebuji (bez posouvání ostatních), ale zase jsou jiné mezery mezy odkazy v důsledku rozdílného množství znaků viz. https://i.imgur.com/1bbxSiy.png

Dokázal by někdo poradit, jak to elegantně řešit?

.item:hover svg { sipka + 20px }
.item:hover + .item { margin-left: -20px; }

Místo margin jde asi použít transform, nebo jiné řešení. Jde o princip.

EDIT: Když pošleš odkaz na web, tak bych sepsal kod přímo.

Yes, to je přesně to co jsem potřeboval. Díky Ti moc.

Asi by mě to nenapadlo, už jsem uvažoval o JS, který bude brát width elementu a připočítávat těch 15px :D

S tímhle zápisem mi to funguje jak jsem potřeboval. Je tam nějaký ten pixel flickering, ale to bude asi můj fail někde v timingu animace.

Kód:

.footer-li-holder{
transition-property: margin;
transition-duration: 300ms;
transition-timing-function: ease;
}

.footer-li-holder:hover + .footer-li-holder {
margin-left: -15px;
}

No tam bude asi něco víc hele https://jsfiddle.net/pamare/za6f13ct/4/. Nevím, musel bych to vidět a řešit přímo. S tím se pak musí dycky nějak pohrát nad konkrétníma elementama.

Řešení mě napadá celá řada - https://jsfiddle.net/pamare/028ts5e4/. Tohle je přes padding, kdy víš, že napravo máš 30px tak na hover tomu elementu dáš 20px (zvětší px té šipky).

Kouknu na to, musím teď mimo PC. Dám pak později vědět jak jsem to vyřešil, kdyby se to někomu hodilo.

Budu muset šáhnout po jiném solution, protože jsem zapomněl na to, že odkazy jsou ve flex wrapperu s flex-wrap: wrap; a tam mi to pak posouvá i ten dolní řádek.

No proto ten padding verze, co jsem poslal. To řeší přesně tohle :D Říkám, je to o tom, vidět jak to máš řešený, protože se přesně stane to, že tam je blok kvůli něčemu jinému.

Osobně bych to řešil paddingem a šipku bych raději dal absolutní. A ještě lepší je nevymýšlet zbytečnosti, které nikdo nedocení - sám s tím mám bohaté zkušenosti, takže od jisté doby se to snažím nedělat, i když se mi to čas od času stejně daří - člověk holt chce být kreativní :)

Mám to fixnuté. Tím marginem ani paddingem mi to prostě nešlo (jsem amatér). Problikávalo to a chovalo se to divně. Určitě byste to hned vyřešili, kdybych poslal URL, ale bohužel NDA.

Nakonec jsem to udělal jak píše Petr. Celou šipku abslute, celému wrapperu dal padding-left, aby text začínal, kde má a animuji width šipky + text přes

Kód:

transform: translate3d(15px, 0px, 0px);

Ten se pak posune o těch 15px, když se šipka zvětší o 15px.

Možná to nebude nejideálnější řešení, ale funguje jak má.