使用伪元素时如何使第二行文本与第一行对齐？答案

【问题标题】：How can make the 2nd line of text align with the 1st line while using a pseudo element?使用伪元素时如何使第二行文本与第一行对齐？
【发布时间】：2020-09-01 23:44:54
【问题描述】：

我有一些带有文本的按钮，当它们被点击时会下拉文本。按钮在文本之前有一个伪元素。它在桌面视图上看起来不错，但是当我在移动设备上查看它时，文本会折叠成两行，第二行落在伪元素之下。我希望让第二行与第一行的开头对齐。这是正在发生的事情的图片：

.accordion:before {
    content: url(../images/new-star.png);
    font-size: 15px;
    margin: 0 10px 15px 5px;
    vertical-align: middle;
    font-size: 30px;
    display: inline-block;
    height: 35px;
}

<button class="accordion"><span class="button-text">Click here to see more info on this topic</span></button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, incidunt unde. Placeat aspernatur impedit deleniti atque minima commodi, fuga quasi id voluptatum ipsum sit modi doloremque tempore debitis molestias asperiores! Alias quibusdam voluptatem porro recusandae fugiat ut atque reprehenderit in ipsa natus, dolorum, repellendus quo! Corporis deleniti aliquid cumque esse.
            </p>
        </div>

【问题讨论】：

标签： html css pseudo-element text-alignment

【解决方案1】：

你可以让你的按钮弯曲：

.accordion {
  display: flex;
  align-items:center;  /* optional - horizontally centres the text or icon */
}

.accordion:before {
  content: url(../images/new-star.png);
  font-size: 15px;
  margin: 0 10px 15px 5px;
  vertical-align: middle;
  font-size: 30px;
  display: inline-block;
  height: 35px;
}

.button-text {
  flex-grow: 1; /* make text fill rest of space, don't really need this */
  text-align: left;
}

<button class="accordion"><span class="button-text">Click here to see more info on this topic</span></button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, incidunt unde. Placeat aspernatur impedit deleniti atque minima commodi, fuga quasi id voluptatum ipsum sit modi doloremque tempore debitis molestias asperiores! Alias quibusdam voluptatem
    porro recusandae fugiat ut atque reprehenderit in ipsa natus, dolorum, repellendus quo! Corporis deleniti aliquid cumque esse.
  </p>
</div>

【讨论】：

谢谢皮特！！