How can I achieve this text stroke effect with CSS?

Question

I need to achieve the following layout, specifically the effect where the bottom blue line intersects the 'p', and the line 'break's around it:

https://i.stack.imgur.com/BRxZ1.jpg

The current HTML is simply:

    <h2>
        An unmatched fishing & boating
        <span class="thick">experience</span>
    </h2>

The requirements are:

1. Needs to be dynamic, if the text is changed and another letter intersects the line, then the same effect is required, where the blue line breaks around the text.

2. Has to be cross browser compatible with current versions of major browsers.

3. Has to be responsive. The width of the line will change at different resolutions.

What I've tried:

I first looked into the -webkit-text-stroke property, since I'm basically simulating a Photoshop stroke. Aside from the fact that it's only webkit compatible, it seems to create the stroke inwards rather than from the outside, so that won't work. Maybe I'm missing something with this property though.

I also tried text-shadow, but as it doesn't support spread like box-shadow, I can't achieve a hard line. I tried stacking multiple text-shadows, but it doesn't achieve the intended effect.

Maybe there is a way to do with it :before / :after pseudo-elements? Or am I just blanking on an easier approach?

Answer 1

A pretty cool challenge.

My solution is text-shadow based. So you need to change it and adjust it to your liking. i.e. How much you want your letters to cut out of the line. So depending on your font type and size you will need to change text-shadow size. Also you can also stack more shadows on top of another if you want to make line cut bigger.

https://jsfiddle.net/1to5e8gL/

<h2>
    An unmatched fishing &amp; boating <br>
    <span class="thick">experqiyencje</span>
</h2>

    h2 {
    background: #00008B;
    color: #FFF;
    font-family: sans-serif;
    padding: 1em;
}

.thick {
    font-size: 60px;
    text-shadow: 8px 2px #00008B , -8px -2px #00008B;
}

span:after {
    content: '';
    width: 100%;
    border-bottom: 3px solid #FFA500;
    display: block;
    margin-top: -7px;
}