Хочу иметь другой размер нижнего края, а затем размер фона

florian de wulf спросил: 13 июня 2018 в 02:46 в: html

Что я пытаюсь получить

Что я сейчас получил

Я хочу, чтобы мой цвет фона имеют другой размер, чем мой нижний край, но я не знаю, как это сделать.

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

.background h3 {
  background-color: red;
}

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

Может ли кто-нибудь помочь мне? спасибо.


2 ответа

Есть решение
Andrzej Ziółek ответил: 13 июня 2018 в 02:53

Я бы пошел ниже решения. Я думаю, что это довольно понятно.

Snippet

.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>
felipeab ответил: 13 июня 2018 в 03:11

Решение выше будет работать, но я рекомендую не использовать поплавки, если это возможно:

.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>