在CSS中的文本旁边重新绑定

Question

我正在尝试使用html和css创建以下内容。

image I am trying to create - click here to view

我希望它能够做出回应，但我不知道从哪里开始。请帮忙。

Answer 1

简单

.desire{
  font-weight: bold;
  font-family: "Arial";
  letter-spacing: -0.5;
  padding-left: 7px;
  color: #414141;
  border-left: 4px solid #840000;
}
/*example*/
.a{
  font-size: .7em;
}
.b{
  font-size: 1.7em;
}
.c{
  font-size: 2.7em;
}

<p class="desire a">WHO WE SERVE</p>
<p class="desire b">WHO WE SERVE</p>
<p class="desire c">WHO WE SERVE</p>