-1

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:

enter image description here

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?

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Schaep
  • 1
  • 1
  • Could you explain what is meant by 'it isn't a repetitive image'? It looks as though you could repeat it - is there a problem with doing that? – A Haworth Aug 12 '23 at 19:06
  • The underlining displayed in the image is not repetitive SVG or pattern, it is stretched and skewed to fit. – dodrg Aug 12 '23 at 19:52
  • Can you share a link to the site on which you "came accross" this different style? On my monitor it gets rather too blurry and indistinct if I zoom in far enough on the image to try and see it properly. – David Thomas Aug 12 '23 at 21:04

1 Answers1

0

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.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thank you for your questions and comments. Appreciate it. I think it is clear by the answer you put in. If I need different sizes I will make a S, M, L, XL version and strectch/skew where needed? The repetition part is then not even needed since the svg is asymetric; the bacon underlining is a fit for repetitive use, right? – Schaep Aug 16 '23 at 10:20
  • It depends on what you want. If you want just have one copy and stretch that, then do that. My answer assumed you wanted to have a wiggly line - lots of copies. This is possible because the image you give is set to allow repeating (like wallpaper). If it's not what you want I'll delete this answer. – A Haworth Aug 16 '23 at 10:29