html - 词组的第一个字母

Question

我想突出显示一组单词的第一个字母，它们以相同的字母开头并用换行符分隔

这是我想要实现的目标

我试过这个代码，其他的词似乎在第一个字母下面

p::first-letter {
  font-size: 40px;
  font-weight:800;
}

p span::before{
    content: "\a";
    white-space: pre;
}

<p>Youthful<span>oungish</span></p>

知道如何实现这一目标吗？谢谢

标签： htmlcss

Answer 1

你能检查下面的代码吗？希望它对你有用。使用 flex 属性我们可以设计这种类型的结构。

请参考此链接：https ://jsfiddle.net/yudizsolutions/xzub1Lq4/6/

.title {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

.title .main-character {
  margin-right: 10px;
  font-size: 50px;
  line-height: 50px;
  font-weight: 800;
}

.title p {
  margin: 0;
}

<div class="title">
  <p class="main-character">Y</p>
  <div>
    <p>outhful</p>
    <p>oungish</p>
  </div>
</div>