text-underline-offset

So this uses text-underline-offset: -16px; to move the line upwards. The line thickness can be added to the text-decoration declaration. That is text-decoration: underline white 20px;. An unfortunate problem with this is there is a bug in Chrome based browsers. A the underline thickness is increased the underline also moves downwards. This is not so noticeable with thin lines of 1 or 2 pixels or so. But the problem is excerbated the more the underline thickness is increased. When used as a background colour and adjusted to fit with text-underline-offset the underline/background won't cover the text in Chrome. The alternative way to do this is by adding span tags to each element and adding a background-color to these instead. The downsides though are firstly you need to alter the markup and you have no control of the thickness of the background either. Hopefully Chrome will sort out this issue soon, though I wouldn't place any bets on it.

The heading text on the side uses two declarations. First it uses writing-mode: vertical-lr;. That would put it so that the first letter would be at the top and the word would be read downwards. To change it the other way I used transform: rotate(189deg);. The reason I've done it with two steps rather than simply use transform: rotate(-90deg); is that transform can do strange things at that angle.Using it for a simple 180 degrees though works well.

The background image is from picsum.photos. It uses a background-blend-mode: overlay;.