li::first-lineを使って、行を揃えたいのですがうまく行きません。

ツイッターで見つけたこの方法を使いたいのですが、うまく行きません。
下記のコードを使って文章を書いたのですが、
画像の上のような状態のままで、検証モードで見ても擬似要素のコードが見つかりませんでした。(反映されていない？？)
どうしたらうまく擬似要素を使えますでしょうか？
よろしくお願いします。

【追記】

行を揃えることは出来たのですが、赤い囲みのテキスト部分が左寄りになってしまいました。
赤い囲みを左右中央寄せにしたいのですが、どうしたらよいでしょうか？

【追記2】

<section class="strength-section">
  <div class="strength-section-content">
    <div class="strength-box">
      <div class="strength-box-content">
        <div class="strength-step">
          <div class="strength-step-wrap">
            <div class="strength-step-box step1 ">
              <h1>1.あああああああああああ</h1>
              <i class="fa fa-envelope" aria-hidden="true"></i>
              <div class="strength-step-box-content">
                <ul>
                  <li><i class="fas fa-check"></i>いいいいいいいいいいいいいいいいいい</li>
                  <li><i class="fas fa-check"></i>うううううううううううううううううう</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

.strength-section {
  height: auto;
  background-color: #045a87;
  padding: 20px;
}

.strength-section a {
  text-decoration: none;
}

.strength-section-content {
  max-width: 1140px;
  margin: 0 auto;
}

.strength-box {
  height: auto;
  border-radius: 40px;
  position: relative;
}

.strength-box-content {
  text-align: center;
  padding-top: 40px;
  font-weight: bold;
}

.strength-box-content p {
  font-size: 18px;
  color: #ffcc00;
}

.strength-btn-container {
  margin: 20px;
}

.strength-btn-container a {
  font-weight: bold;
}

.strength-btn-container button {
  border-radius: 20px;
  padding: 20px;
}

.strength-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.strength-step-wrap {
  padding: 20px;
}

.strength-step-box {
  width: 264px;
  height: auto;
  border: 4px solid #ffcc00;
  border-radius: 24px;
  padding: 10px 20px 6px 20px;
  min-width: 255px;
  min-height: 298px;
}

.strength-step-box h1 {
  font-size: 21px;
  font-weight: bold;
  color: #ffcc00;
}

.strength-step-box i {
  font-size: 50px;
  border: 5px solid #ffcc00;
  border-radius: 60px;
  padding: 20px;
  color: #ffcc00;
}

.strength-step-box-content p {
  margin-top: 10px;
  font-size: 18px;
  color: #ffcc00;
  border: 0px solid #ffcc00;
  padding: 0px;
}

.strength-step-box-content i {
  margin-top: 10px;
  font-size: 18px;
  color: #ffcc00;
  border: 0px solid #ffcc00;
  padding: 0px;
}

.strength-step-box-content ul {
  list-style: none;
}

.strength-step-box-content ul li {
  font-size: 18px;
  color: #ffcc00;
  text-align: left;
}

.strength-step-box-content ul li::first-line {
  margin-left: -1em;
}

.strength-step-box .fa-handshake {
  font-size: 44px;
  padding: 20px 16px;
}

行動規範の内容に同意します

回答1件

ベストアンサー

::first-line (:first-line) - CSS: カスケーディングスタイルシート | MDN

::first-line 擬似要素では、一部の CSS プロパティのみが利用できます。

上記の記述の後に、利用できるCSSプロパティのリストがありますが、margin はありません。

text-indentを使うといいでしょう。
text-indent - CSS: カスケーディングスタイルシート | MDN

css
1.strength-step-box-content ul li {
2  font-size: 18px;
3  color: #ffcc00;
4  text-align: left;
5  text-indent:-.5em;
6}

追記

padding-left で調整してください。

css
1.strength-step-box-content ul li {
2  font-size: 18px;
3  color: #ffcc00;
4  text-align: left;
5  text-indent:-.5em;
6  padding-left: 20px;
7}

別案

text-indent での字下げだと、余白の調整や先頭を揃えたりが面倒なので、
display: flex;でチェックマークとテキストを横並びにする方法を提案しておきます。

css
1.strength-step-box-content i {
2  font-size: 18px;
3  color: #ffcc00;
4  border: 0px solid #ffcc00;
5  padding: 0px;
6  margin-right: .4em;
7  flex-shrink: 0;
8}
9
10.strength-step-box-content ul li {
11  font-size: 18px;
12  color: #ffcc00;
13  text-align: left;
14  display: flex;
15  align-items: flex-start;
16}