yu.css.ui/css/component/divider.css

纯CSS通用UI模块和组件

.yu-divider {
  width: 100%;
  height: 0;
  border-bottom: 1px solid #E4E7ED;
  margin: 14px 0;
  display: inline-block;
  color: #303133; }
  .yu-divider.horizontal {
    border-bottom: none;
    height: auto;
    text-align: center;
    width: 100%;
    display: table; }
    .yu-divider.horizontal:before {
      position: relative;
      top: 50%;
      width: 50%;
      transform: translateY(50%);
      border-top: 1px solid #E4E7ED;
      content: "";
      display: table-cell; }
    .yu-divider.horizontal:after {
      position: relative;
      top: 50%;
      width: 50%;
      transform: translateY(50%);
      border-top: 1px solid #E4E7ED;
      content: "";
      display: table-cell; }
    .yu-divider.horizontal > span {
      word-break: keep-all;
      display: table-cell;
      padding: 0 14px; }
    .yu-divider.horizontal.left:before {
      width: 5%; }
    .yu-divider.horizontal.left:after {
      width: 95%; }
    .yu-divider.horizontal.right:before {
      width: 95%; }
    .yu-divider.horizontal.right:after {
      width: 5%; }
  .yu-divider.vertical {
    width: 1px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    border-right: 1px solid #E4E7ED;
    margin: 0 4px; }