My codepen: https://codepen.io/chunzg/pen/YzQWRNz
I would like to make the text align to the right so that when it is clicked, the text lengthens towards the left instead of towards the right which makes the yellow circle move to the right. Is there a way of making the yellow circle stay where it is and make the text ‘Get Started’ move outwards towards left?
I have tried text-align: right but that doesn’t change anything.
You can use justify-content:flex-end on your <div> instead of text-align. That’ll make the yellow circle almost disappear behind the edge of the page, but some padding-right for .next_text, and changing the right property of the ::after elment to a positive value would fix that.
thank you very much - it works in my codepen but not in my actual project 
Do you have it online? “It’s not working” isn’t exactly detailed, what’s not working?
sorry - it’s a work project so can’t share the link but basically the flex-end isn’t doing anything at all.
Then my first idea is that the flex-container might not have full width. Is that flex-container itself a flex-item from an outer container?
To test this, you can give the flex-container a fixed width of maybe 800px and see if that changes anything.
Thank you so much! You are right - it worked exactly like you said 
It was indeed in another flexbox. 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.