https://codepen.io/Nonverbis/pen/GRvwMOr

<p><span class="n-underline-bacon">Test lorem ipsum</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  

p {
  font-size: 1.6rem;  
}
.n-underline-bacon {
  display: inline-block;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-repeat: repeat-x;
  background-position: 0 0.96em;
  background-size: 1rem 1rem;
  color: #9e4446;
}

I'd like to underline a text with an SVG-image. The underlining is present. But it is not visible. I'd like the underlining to find its place even if it touches the tops of the line below.

Could you help me make the underlining visible just right between the lines?

CodePudding user response：

You can use ::after pseude element like this;

p {
  font-size: 1.6rem;  
}
.n-underline-bacon {
  display: inline-block;
  color: #9e4446;
  position: relative;
}
.n-underline-bacon::after {
  content: "";
  position: absolute;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-repeat: repeat-x;
  background-size: contain;
  width: 100%;
  height: 10px;
  left: 0;
  bottom: -4px;
}

<p><span class="n-underline-bacon">Test lorem ipsum</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use padding with negative margin like this:

p {
  font-size: 1.6rem;
}

.n-underline-bacon {
  display: inline-block;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-repeat: repeat-x;
  background-position: 0 0.96em;
  background-size: 2rem 2rem;
  color: #9e4446;
  /* added */
  padding: 10px 0;
  margin: -10px 0;
  /***/
}

<p><span class="n-underline-bacon">Test lorem ipsum</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
  and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
  Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>