html - 使图像充当文本下划线

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>

如何使此笔画图像充当文本下划线？

标签： htmlcss

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>