@arco-design/web-react/lib/Divider/style/index.less

Arco Design React UI Library.

@import './token.less';

@divider-prefix-cls: ~'@{prefix}-divider';

.@{divider-prefix-cls} {
  &-horizontal {
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: @divider-margin-vertical 0;
    border-bottom: @divider-size @divider-line-style @divider-color-bg;
    clear: both;

    &.@{divider-prefix-cls}-with-text {
      margin: @divider-margin-vertical_text 0;
      display: flex;
      align-items: center;
      border-bottom-width: 0;
      border-bottom-style: @divider-line-style;

      &::before,
      &::after {
        content: '';
        height: 0;
        flex: 1;
        border-bottom: @divider-size;
        border-bottom-style: inherit;
        border-bottom-color: inherit;
      }
    }

    &.@{divider-prefix-cls}-with-text-left:before {
      flex-basis: @divider-position-text-left;
      flex-grow: 0;
    }

    &.@{divider-prefix-cls}-with-text-right:after {
      flex-basis: @divider-position-text-right;
      flex-grow: 0;
    }
  }

  &-vertical {
    display: inline-block;
    min-width: 1px;
    max-width: 1px;
    height: 1em;
    margin: 0 @divider-margin-horizontal;
    border-left: @divider-size @divider-line-style @divider-color-bg;
    vertical-align: middle;
  }

  // 仅水平分割线才支持文字，只考虑水平情况
  &-text {
    box-sizing: border-box;
    padding: 0 @divider-margin-text;
    font-size: @divider-font-size;
    font-weight: @divider-font-weight;
    line-height: 2;
    color: @divider-color-text;
  }
}