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

Question

I have some buttons with text on them that drop down text when they are clicked. The buttons have a pseudo element before the text. It looks good on desktop view but when I view it in mobile, the text wraps down to two lines and the second line falls under the pseudo element. I am hoping to get that second line to align with the start of the first line. Here is a picture of what is happening:

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

标签： htmlcsspseudo-elementtext-alignment

Answer 1

You can make your button flex:

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