Можно ли как-то сделать такие прямоугольники под текстом на псевдоклассе before?

Question

В макете есть такая колонка

Можно ли ее как-то реализовать не вставляя дивов ниже текста? На псевдоклассах, например?

Моя разметка колонки

    <div class="column">
    <div class="column__content">
        <span class="content__item">Dising (40%)</span>
        <span class="content__item">Photography (30%)</span>
        <span class="content__item">Marketing (15%)</span>
        <span class="content__item">brending (15%)</span>
    </div>
</div>

стили

.column{
display: flex;
flex-direction: column;
background-color: #ffffff;
flex : 0 1 33.333%;
justify-content: center;
}

.column__content {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}

content__item{
text-transform: uppercase;
color : #000;
font-size: 30px;
letter-spacing: 1px;
margin-bottom: 30px;
}

 .content__item::before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 100%;
  height: 15px;
  background: linear-gradient(to right, #a21af0, #ff0072);
  }

Вот что получилось

Как можно сделать такую линию, разделенную на две части под каждым элементом колонки?

Answer 1

Можно ли ее как-то реализовать не вставляя дивов ниже текста? На псевдоклассах, например?

Да, конечно можно. Вот пример:

div {
  max-width: 400px;
  text-align: center;
}

span {
  display: block;
  position: relative;
  margin-bottom: 30px;
  padding: 0 50px;
}

span:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgb(162, 26, 240);
  background: linear-gradient(35deg, rgba(162, 26, 240, 1) 45%, rgba(255, 0, 114, 1) 55%);
}

<div>
  <span>Красивое предложение</span>
  <span>И еще красивее</span>
</div>

БЛОГ НА HUSL

Можно ли как-то сделать такие прямоугольники под текстом на псевдоклассе before?

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