Html 填充对：：after有影响

我想创建一个只包含一个类的列表项

但我所做的一切都会对：：after和：：before产生影响。我怎样才能防止呢

例如，force:：after静止并增加类的填充

    .magic {
      width: 100%;
      height: 30px;
      background: #57ab27;
      color: white;
      font-size: 20px;
      padding-top: 6px;
      text-align: center;
      font-family: "Arial", Arial, Sans-serif;
    }

    .magic::before {
      content: "\f067";
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      /*--adjust as necessary--*/

      display: block;
      color: #FFF;
      font-size: 18px;
      padding-right: 0.5em;
      position: absolute;
      top: 17px;
      left: 20px;
    }

    .magic::after {
      content: "";
      display: block;
      width: 5px;
      height: 36px;
      background: white;
      position: relative;
      left: 40px;
      top: -29px;
    }

---

谢谢大家!

你尝试过负利润率或绝对定位吗？你正在尝试这样做-从你的问题来看，你真的不清楚你在尝试做什么。我开发了一个angularjs应用程序，必须为特定事件更改此行的状态。目前我们这一行有4个css类，很难用其他css类对每个事件做出反应。所以我认为，这一行只能用一个css类来完成。谢谢你，保利