想要边框的底部大小与背景大小不同

Question

What I am trying to get

What I now got

我希望背景颜色的大小与边框底部的大小不同，但是我不知道该怎么做。

.underline {
  border-bottom: 3px solid;
  border-bottom-color: red;
}

.background h3 {
  background-color: red;
}

<section class="background">
  <h3 class="underline">Hotels</h3>
</section>

有什么办法帮助我吗？谢谢。

Answer 1

上面的解决方案可以工作，但是我建议不要使用浮点数：

.title{
  color: white;
  background: red;
  display: inline-block;
  padding: 10px 30px;
 
}

.title-container{
  border-bottom: 1px solid red;
  display: block;
}

<div class="title-container">
  <div class="title">Sports</div>
</div>

Answer 2

我会寻求以下解决方案。我认为这很不言自明。

摘要

.background {
  box-sizing: border-box;
  border-bottom: 2px solid red;
  overflow: hidden;
}

.background h3 {
  float: left;
  margin: 0;
  background: red;
}

<section class="background">
  <h3 class="underline">Hotels</h3>
</section>