Classes targeting ::before and ::after

[Webmetz]

This is more a proof of concept for future builds. A needed arose for a client site to remove a "before" on smaller screens. So I quickly and dirtily made some css classes to handle it.

I probably could of condensed it with SCSS, but I didn't have the time given the project deadline.

Feel free to use.

.d-before-none::before {
  display: none !important;
}

.d-before-inline::before {
  display: inline !important;
}

.d-before-inline-block::before {
  display: inline-block !important;
}

.d-before-block::before {
  display: block !important;
}

.d-before-table::before {
  display: table !important;
}

.d-before-table-row::before {
  display: table-row !important;
}

.d-before-table-cell::before {
  display: table-cell !important;
}

.d-before-flex::before {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-before-inline-flex::before {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-before-sm-none::before {
    display: none !important;
  }
  .d-before-sm-inline::before {
    display: inline !important;
  }
  .d-before-sm-inline-block::before {
    display: inline-block !important;
  }
  .d-before-sm-block::before {
    display: block !important;
  }
  .d-before-sm-table::before {
    display: table !important;
  }
  .d-before-sm-table-row::before {
    display: table-row !important;
  }
  .d-before-sm-table-cell::before {
    display: table-cell !important;
  }
  .d-before-sm-flex::before {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-before-sm-inline-flex::before {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-before-md-none::before {
    display: none !important;
  }
  .d-before-md-inline::before {
    display: inline !important;
  }
  .d-before-md-inline-block::before {
    display: inline-block !important;
  }
  .d-before-md-block::before {
    display: block !important;
  }
  .d-before-md-table::before {
    display: table !important;
  }
  .d-before-md-table-row::before {
    display: table-row !important;
  }
  .d-before-md-table-cell::before {
    display: table-cell !important;
  }
  .d-before-md-flex::before {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-before-md-inline-flex::before {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-before-lg-none::before {
    display: none !important;
  }
  .d-before-lg-inline::before {
    display: inline !important;
  }
  .d-before-lg-inline-block::before {
    display: inline-block !important;
  }
  .d-before-lg-block::before {
    display: block !important;
  }
  .d-before-lg-table::before {
    display: table !important;
  }
  .d-before-lg-table-row::before {
    display: table-row !important;
  }
  .d-before-lg-table-cell::before {
    display: table-cell !important;
  }
  .d-before-lg-flex::before {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-before-lg-inline-flex::before {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-before-xl-none::before {
    display: none !important;
  }
  .d-before-xl-inline::before {
    display: inline !important;
  }
  .d-before-xl-inline-block::before {
    display: inline-block !important;
  }
  .d-before-xl-block::before {
    display: block !important;
  }
  .d-before-xl-table::before {
    display: table !important;
  }
  .d-before-xl-table-row::before {
    display: table-row !important;
  }
  .d-before-xl-table-cell::before {
    display: table-cell !important;
  }
  .d-before-xl-flex::before {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-before-xl-inline-flex::before {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-before-print-none::before {
    display: none !important;
  }
  .d-before-print-inline::before {
    display: inline !important;
  }
  .d-before-print-inline-block::before {
    display: inline-block !important;
  }
  .d-before-print-block::before {
    display: block !important;
  }
  .d-before-print-table::before {
    display: table !important;
  }
  .d-before-print-table-row::before {
    display: table-row !important;
  }
  .d-before-print-table-cell::before {
    display: table-cell !important;
  }
  .d-before-print-flex::before {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-before-print-inline-flex::before {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}


.d-after-none::after {
  display: none !important;
}

.d-after-inline::after {
  display: inline !important;
}

.d-after-inline-block::after {
  display: inline-block !important;
}

.d-after-block::after {
  display: block !important;
}

.d-after-table::after {
  display: table !important;
}

.d-after-table-row::after {
  display: table-row !important;
}

.d-after-table-cell::after {
  display: table-cell !important;
}

.d-after-flex::after {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-after-inline-flex::after {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-after-sm-none::after {
    display: none !important;
  }
  .d-after-sm-inline::after {
    display: inline !important;
  }
  .d-after-sm-inline-block::after {
    display: inline-block !important;
  }
  .d-after-sm-block::after {
    display: block !important;
  }
  .d-after-sm-table::after {
    display: table !important;
  }
  .d-after-sm-table-row::after {
    display: table-row !important;
  }
  .d-after-sm-table-cell::after {
    display: table-cell !important;
  }
  .d-after-sm-flex::after {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-after-sm-inline-flex::after {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-after-md-after-none::after {
    display: none !important;
  }
  .d-after-md-after-inline::after {
    display: inline !important;
  }
  .d-after-md-after-inline-block::after {
    display: inline-block !important;
  }
  .d-after-md-after-block::after {
    display: block !important;
  }
  .d-after-md-after-table::after {
    display: table !important;
  }
  .d-after-md-after-table-row::after {
    display: table-row !important;
  }
  .d-after-md-after-table-cell::after {
    display: table-cell !important;
  }
  .d-after-md-after-flex::after {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-after-md-after-inline-flex::after {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-after-lg-none::after {
    display: none !important;
  }
  .d-after-lg-inline::after {
    display: inline !important;
  }
  .d-after-lg-inline-block::after {
    display: inline-block !important;
  }
  .d-after-lg-block::after {
    display: block !important;
  }
  .d-after-lg-table::after {
    display: table !important;
  }
  .d-after-lg-table-row::after {
    display: table-row !important;
  }
  .d-after-lg-table-cell::after {
    display: table-cell !important;
  }
  .d-after-lg-flex::after {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-after-lg-inline-flex::after {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-after-xl-none::after {
    display: none !important;
  }
  .d-after-xl-inline::after {
    display: inline !important;
  }
  .d-after-xl-inline-block::after {
    display: inline-block !important;
  }
  .d-after-xl-block::after {
    display: block !important;
  }
  .d-after-xl-table::after {
    display: table !important;
  }
  .d-after-xl-table-row::after {
    display: table-row !important;
  }
  .d-after-xl-table-cell::after {
    display: table-cell !important;
  }
  .d-after-xl-flex::after {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-after-xl-inline-flex::after {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-after-print-none::after {
    display: none !important;
  }
  .d-after-print-inline::after {
    display: inline !important;
  }
  .d-after-print-inline-block::after {
    display: inline-block !important;
  }
  .d-after-print-block::after {
    display: block !important;
  }
  .d-after-print-table::after {
    display: table !important;
  }
  .d-after-print-table-row::after {
    display: table-row !important;
  }
  .d-after-print-table-cell::after {
    display: table-cell !important;
  }
  .d-after-print-flex::after {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-after-print-inline-flex::after {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}