How to create a specific text underlining with CSS

Question

I can get different styles of under-lining done with CSS, but they are straight, wavy or dotted.

Now I came across a different style which I like, but I have no clue on how I can realize this. It is a bit more playful on the page. Something like this:

I tried several classifications in the CSS, but they are all standard. Then if I look at SVG styling like this, it might be an option.

.underline--bacon {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-position: 0 1.06em;
  background-size: 28px 9px;
  color: #9e4446;
}

But then I can't use it easily on a piece of text, because it isn't a repetitive image. Is there any other way to implement this?

Answer 1

Here is an example of using the image given in the question with the styling as far as it is given within the question.

The image is made to repeat on the x axis but not on the y axis. The line of text is given some extra bottom padding to ensure the underline is shown.

<style>
  .underline--bacon {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
    background-position: 0 1.06em;
    background-position: 0 bottom;
    background-size: 28px 9px;
    color: #9e4446;
    background-repeat: repeat no-repeat;
    display: inline-block;
    padding-bottom: 9px;
  }
</style>
<div class="underline--bacon">a line of text</div>

Of course this method only works for a line of text. But I haven't understood from the question what 'non-repetitive' meant so this answer just covers the simple case.