How to centre layered fonts?

Styling (CSS)
1

I’m trying to use a layered font using CSS “:after” on a class to load the shadow version of the font. The css for the font uses weight to call the different font layers.

Everything works as expected until I try to centre the text, and then the layers don’t align. Any tips, alternate approaches?

My test page is here:
https://www.ragandbone.ca/plain-layer.html

The code for the page:

Layer test .shade{ position: relative; font-size: 8em; font-family: 'Besley Shaded Web'; color: #595774; font-weight: 400; } .shade:after{ position: absolute; top: 0; left:0; content:"Story Time"; color: #F2B035; font-weight: 500; } .shade2{ position: relative; text-align: center; font-size: 8em; font-family: 'Besley Shaded Web'; color: #595774; font-weight: 400; } .shade2:after{ position: absolute; top: 0; left: 0; content:"Story Time"; color: #F2B035; font-weight: 500; }

Left align layers as hoped,

Center align not at all!

Story Time

Story Time

3

Try adding width: 100% to .shade2:after

2 Likes
4

Well! That seems to work perfectly. Why didn’t I think of that?—Because I have no idea what I’m doing :slight_smile:

Thanks so much for your help.

3 Likes