.line-devided {
  //$line-devided-width-percentage:                       40% !default;
  $line-devided-color:                                  rgba(0,0,0,0.3) !default;
  $line-devided-weight:                                 500;
  $line-devided-border-width:                           2px;
  $line-devided-border:                                 solid 2px rgba(0,0,0,0.1) !default;
  @each $name, $line-devided-width-percentage in ('' : 40%, '-20': 20%) {
    &#{$name} {
      position: relative;
      text-align: center;
      color: $line-devided-color;
      font-weight: $line-devided-weight;

      &:before, &:after {
        content: '';
        position: absolute;
        border-bottom: $line-devided-border;
        display: block;
        width: $line-devided-width-percentage;
      }
      &:after {
        left: 100% - $line-devided-width-percentage;
        bottom: 50%;
        margin-bottom: -#{$line-devided-border-width};
      }
      &:before {
        top: 50%;
      }
    }
  }
}