CODEWITHSUNDEEP
htmlcss
Jean Celestin
Jean Celestin

Reputation: 75

First letter of group of words

I want to highlight the first letter of a group of words, which begin with the same letter and are separated with a break line

Here is what I want to achieve enter image description here

I tried this code, and the other words seem to go under the first letter

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

p span::before{
    content: "\a";
    white-space: pre;
}
<p>Youthful<span>oungish</span></p>

Any idea how to achieve this ? Thank you

Upvotes: 2

Views: 160

Answers (1)

Yudiz Solutions
Yudiz Solutions

Reputation: 4449

Can you please check the below code? Hope it will work for you. Using flex property we can design this type of structure.

Please refer to this link: 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>

Upvotes: 2

Related Questions