liser/src/modules/text-decoration.css

functional css help to optimizing design work and building responsive websites

.strike {
  text-decoration: line-through;
}
.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}

@media screen and (min-width: 30em) {
  .strike-ns {
    text-decoration: line-through;
  }
  .underline-ns {
    text-decoration: underline;
  }
  .no-underline-ns {
    text-decoration: none;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .strike-m {
    text-decoration: line-through;
  }
  .underline-m {
    text-decoration: underline;
  }
  .no-underline-m {
    text-decoration: none;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .strike-ml {
    text-decoration: line-through;
  }
  .underline-ml {
    text-decoration: underline;
  }
  .no-underline-ml {
    text-decoration: none;
  }
}

@media screen and (min-width: 60em) {
  .strike-l {
    text-decoration: line-through;
  }
  .underline-l {
    text-decoration: underline;
  }
  .no-underline-l {
    text-decoration: none;
  }
}