0

So, im trying to implement a drop cap solution. Did some research and I've tried every solution in the book. When punctuations are involved, nothing works. So, I came up with this solution that works. My question is if there is something more simple then having 2 span?

HTML:

<div class="article">
    <p><span class="dropcap"><span>A</span></span> Lorem ipsum dolor sit amet.</p>
    <p><span class="dropcap">«¡<span>O</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet!»</p>
</div>

CSS:

.article span.dropcap {
  float: left;
}

.article span.dropcap span {
    display: inline-block;
    font-size: 70px;
    line-height: 60px;
    font-family: Georgia, Times, "Times New Roman", serif;
    margin-right: 10px;
    color: #c00;
    text-shadow: 1px 1px #000;
}

https://jsfiddle.net/r3sgov5e/

Marco
  • 2,687
  • 7
  • 45
  • 61

0 Answers0