使图像充当文字下划线

Question

我希望此笔触图像充当文本下划线，除了笔触图像等于容器div宽度而不是文本长度宽度，我几乎得到了它。

h1 { text-align: center; }

.container { width: 500px; margin: 0 auto;}

.text-underline {
    background: transparent url("https://cockandbullfestival.co.uk/wp-content/themes/cock_bull/img/nav_underline.png") center bottom repeat-x;
}

<div class="container">
    <h1 class="text-underline"> Text With Stroke Underline </h1>
</div>

如何使此笔触图像用作文本下划线？

Answer 1

在span内考虑一个h1元素（内联元素），这样您就可以进行缩小以适应行为。

h1 {
  text-align: center;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.text-underline span {
  background: url("https://cockandbullfestival.co.uk/wp-content/themes/cock_bull/img/nav_underline.png") center bottom repeat-x;
}

<div class="container">
  <h1 class="text-underline"> <span>Text With Stroke Underline</span> </h1>
</div>

它也适用于多行文字

h1 {
  text-align: center;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.text-underline span {
  background: url("https://cockandbullfestival.co.uk/wp-content/themes/cock_bull/img/nav_underline.png") center bottom repeat-x;
}

<div class="container">
  <h1 class="text-underline"> <span>Text With Stroke Underline Underline Underline Underline Underline Underline</span> </h1>
</div>