css dropcap - 对齐字母高度

Question

我能够获得首字下沉效果，但我想将剩余的文本移高一点。如果您在 fiddle 中看到，文本(“apibus ac..”)位于粉红色 div 的中间。我想将其移高，使其与粉红色 div 处于同一水平。

https://jsfiddle.net/pmf4s1g4/

html

<div class="topa-list-widget">
  <h3>My List</h1>
    <ul>
     <li>
      <a href="#">
       Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa
      </a>
     </li>                                           
    </ul>
   </div>

CSS

.topa-list-widget ul {
  list-style: none;
}

.topa-list-widget ul li a {
  text-decoration: none;
  display: block;
  line-height: 20px;
}

.topa-list-widget ul li a:first-letter {
  font-size: 20px;
  background-color: rgba(218, 42, 137, 0.5);
  padding: 0px 5px !important;
  margin-right: 1px;
}

Answer 1

试试这个:

.topa-list-widget ul {
  list-style: none;
}

.topa-list-widget ul li a {
  text-decoration: none;
  display: block;
  line-height: 20px;
}

.topa-list-widget ul li a:first-letter {
  font-size: 15px;
  background-color: rgba(218, 42, 137, 0.5);
  padding: 0px 3px !important;
  margin-right: 0px;
}

<div class="topa-list-widget">
  <h3>My List</h3>
                    <ul>
                        <li>
                            <a href="#">
                                Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa
                            </a>
                        </li>
                        <li>
                            <a href="#">Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa</a>
                        </li>
                        <li>
                            <a href="#">Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa</a>
                        </li>
                 
                    </ul>
                </div>