Сделать полосу под текстом

Question

Вот макет

Вот HTML и CSS

 
.items_2 {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin: 53px 0;
}

.item_2 {
    display: flex;
    display: -webkit-flex;
    width: 50%;
    padding: 5px 25px;
}

.item_2 p {
    display: block;
    position: relative;
    font-size: 20px;
    line-height: 30px;
    color: #584A45;
}

.item_2 p:before {
    width: 9px;
    height: 9px;
    border: 1px solid #584A45;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 8px;
    left: -25px;
}

<div class="items_2">
    <div class="item_2">
        <p>Comprehensive approach to your health</p>
    </div>
    <div class="item_2">
        <p>Experienced and expert trainers</p>
    </div>
    <div class="item_2">
        <p>High quality equipment</p>
    </div>
    <div class="item_2">
        <p>Location in the city center with a private garden</p>
    </div>
    <div class="item_2">
        <p>Wellness area with steam bath and infrared sauna</p>
    </div>
    <div class="item_2">
        <p>All-inclusive service - from coffee and shakes to shower products</p>
    </div>
</div>

Как сделать розовые линии под текcтом как на макете?

Answer 1

Можно сделать только нижний border и тогда, линию можно анимировать/изменить как-то

То есть:

.item_2 p{
    border-bottom: 1px solid #584A45;
}

Answer 2

Фон делается элементарно - с помощью linear-gradient().

Но, чтобы фон переносился по строкам, нужно преобразовать блочные параграфы в строчные, задав им display: inline; :

.items_2 {
  display: flex;
  flex-wrap: wrap;
  margin: 53px 0;
}

.item_2 {
  width: 50%;
  padding: 5px 25px;
}

.item_2 p {
  position: relative;
  display: inline;
  padding: 5px 0;
  font: 20px/30px sans-serif;
  color: #584A45;
  background-image: linear-gradient(to top, #f9f1ee, transparent);
}

.item_2 p:before {
  content: "";
  position: absolute;
  top: .6em;
  left: -25px;
  height: 9px;
  width: 9px;
  border: 1px solid #584A45;
  border-radius: 50%;
}

<div class="items_2">
  <div class="item_2">
    <p>Comprehensive approach to your health</p>
  </div>
  <div class="item_2">
    <p>Experienced and expert trainers</p>
  </div>
  <div class="item_2">
    <p>High quality equipment</p>
  </div>
  <div class="item_2">
    <p>Location in the city center with a private garden</p>
  </div>
  <div class="item_2">
    <p>Wellness area with steam bath and infrared sauna</p>
  </div>
  <div class="item_2">
    <p>All-inclusive service - from coffee and shakes to shower products</p>
  </div>
</div>

БЛОГ НА HUSL

Сделать полосу под текстом

Ответы (2 шт):