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

Question

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

.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>

Answer 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>

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

How can make the 2nd line of text align with the 1st line while using a pseudo element?

html

css

text-alignment

pseudo-element