填充对:: after有影响

Question

我想创建一个只有一个类的列表项。

但我所做的一切都对:: after和:: before产生了影响。我怎么能防止这种情况？

例如，强制::静止后增加类的填充？

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

http://codepen.io/loose11/pen/doyvBv

谢谢！