css中第一行首字变大，怎么让顶部对齐？

Question

如题

<div class="content-bottomhalf">
                    <div class="content-bh-l" style="padding-top: 50px;">
                            <h1><span class="title-first-words">THE</span> TECHNOLOGE OF FRONT<span class="title-chinese">前端技术领域</span></h1>
                            <div class="article-content">
                            
                            <p>
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端
                            </p>
                            <p>
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端
                            </p>
                            <p>
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端
                            </p>
                            <img src="images/keyboard.jpg"/>
                            </div>
                    </div>
                    <div class="content-bh-r">
                        
                    </div>
                </div>

CSS

.content-bottomhalf{width: 100%;height:610px;overflow: hidden;}

.content-bh-l{width: 415px;float: left;}
.content-bh-l h1{border-bottom:2px solid #11456b;font-family:simhei,"黑体";font-weight: bolder;font-size:34px;line-height: 50px;color:#11456b;}
.title-first-words{font-size: 72px;font-style: italic;color: #f5e327;}
.title-chinese{display: block;font-size:33px;}
.article-content{position: absolute;width: 415px;height: 610px;}
.article-content p{font-size: 12px;line-height: 16px;font-family: simsun,"宋体";}
.article-content p:first-child:first-line{}
.article-content p:first-child:first-letter{font-size: 70px;color: #f5e327;font-family: "Microsoft YaHei","微软雅黑";}
.article-content img{position: absolute;right: 0;}

出来的效果应该这样才是对的

请教！感谢！

Answer 1

加个span标签或者使用:first-letter伪元素

p:first-letter{
  float: left;
  line-height: 60px;
  font-size: 60px;
};