CODEWITHSUNDEEP
css
TWLATL
TWLATL

Reputation: 2879

CSS Drop Cap with embellishment

I'm trying to get a CSS drop cap with an embellishment styled in css. 

p.copy:first-child:first-letter {
  color: black;
  float: left;
  font-style: normal;
  font-weight: 800;
  font-size: 94px;
  line-height: 80px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  margin-right: 10px;
  position: relative;
}

p.copy:first-child:after {
  width: 10px;
  height: 10px;
  background-color: #FA6400;
  position: absolute;
  left: 75px;
  top: 25px;
  content: "";
  display: block;
}
<div>
  <p class="copy">Phasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

See example here:

https://jsbin.com/tizexeyaja/edit?html,css,output

The problem is the :first-child:after, which displays the square, isn't consistently spaced because it's absolutely positioned. And absolutely positioning won't work due to the variable widths of the characters for the drop caps. Is there a way to do this without wrapping the first character in a span?

Upvotes: 3

Views: 122

Answers (1)

Temani Afif
Temani Afif

Reputation: 273031

You can consider a gradient instead where you can control the distance inside the space taken by the character and you will have a consistent space with the text:

p.copy::first-letter {
  color: black;
  float: left;
  font-style: normal;
  font-weight: 800;
  font-size: 94px;
  line-height: 80px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  margin-right: 10px;
  background:
    linear-gradient(#FA6400,#FA6400) 
    top 5px right 5px /* position */
    /10px 10px /* width height */
    no-repeat;
}
<div>
  <p class="copy">Phasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

<div>
  <p class="copy">Lhasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

<div>
  <p class="copy">Shasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

Upvotes: 2

Related Questions