Generated by SassMeister.com.

input.scss

// Replace function to locate and replace the `#` in the hexcode from the color variables with `%23`
// `%23` is the html entity for `#` used for the fill hexcode in the data uri
// https://www.chromestatus.com/features/5656049583390720
// https://css-tricks.com/snippets/sass/str-replace-function/
// $string - Initial string
// $search - Substring to replace
// $replace ('') - New value
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }

  // return Updated string
  @return $string;
}

$black-color--80: #000;
$global-white: #fff;
$black-color--40: #000;

// the expected input/output for the `str-replace` function - in: #dedede, out: %23dedede
$line-fill-color: str-replace('#{$black-color--80}', '#', '%23');
$line-border-color: str-replace('#{$global-white}', '#', '%23');
$line-fill-color--unavailable: str-replace('#{$global-white}', '#', '%23');
$line-border-color--unavailable: str-replace('#{$black-color--40}', '#', '%23');
$line-end-inset: 8;
$line-end-inset-adjustment: 0.7;
$line-end-inset--adjusted: $line-end-inset - $line-end-inset-adjustment;
$line-width: 1;

.pl-Strikethrough {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // Notes on SVG techniques used:
    // Viewboxes are intentionally omitted in order to keep everything on the same px-based coordinate system.
    // The <g> element applies a transform to shift the lower right corner up and to the left by #{$line-end-inset}px.
    // The upper left corner of the <g> element is now #{$line-end-inset}px outside the top left corner of the container, so the <line> start points need to be inset by #{$line-end-inset * 2}px to compensate.
    // The "bordered line" effect is created by two overlapping lines. The "border" gets a square linecap, so it appears to wrap around the end of the inner line with the default (butt) linecap.
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' %3e%3cg transform='translate(-#{$line-end-inset} -#{$line-end-inset})'%3e%3cline x1='#{$line-end-inset * 2}px' y1='#{$line-end-inset * 2}px' x2='100%' y2='100%' stroke-width='#{$line-width * 3}' stroke='#{$line-border-color}' stroke-linecap='square' /%3e%3cline x1='#{$line-end-inset * 2}px' y1='#{$line-end-inset * 2}px' x2='100%' y2='100%' stroke-width='#{$line-width}' stroke='#{$line-fill-color}' /%3e%3c/g%3e%3c/svg%3e");
  }
  &--unavailable::after {
    // When the border is dashed, linecaps cannot be used, because they would cause the dashes to bleed together.
    // In this case, we have to apply separate transforms to each layer so the dashed line can be slightly longer than the solid.
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' %3e%3cg transform='translate(-#{$line-end-inset--adjusted} -#{$line-end-inset--adjusted})'%3e%3cline x1='#{$line-end-inset--adjusted * 2}px' y1='#{$line-end-inset--adjusted * 2}px' x2='100%' y2='100%' stroke-width='#{$line-width * 3}' stroke='#{$line-border-color--unavailable}' stroke-dasharray='3' /%3e%3c/g%3e%3cg transform='translate(-#{$line-end-inset} -#{$line-end-inset})'%3e%3cline x1='#{$line-end-inset * 2}px' y1='#{$line-end-inset * 2}px' x2='100%' y2='100%' stroke-width='#{$line-width}' stroke='#{$line-fill-color--unavailable}' /%3e%3c/g%3e%3c/svg%3e");
  }
}

output.css

.pl-Strikethrough {
  position: relative;
}
.pl-Strikethrough::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' %3e%3cg transform='translate(-8 -8)'%3e%3cline x1='16px' y1='16px' x2='100%' y2='100%' stroke-width='3' stroke='%23fff' stroke-linecap='square' /%3e%3cline x1='16px' y1='16px' x2='100%' y2='100%' stroke-width='1' stroke='%23000' /%3e%3c/g%3e%3c/svg%3e");
}
.pl-Strikethrough--unavailable::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' %3e%3cg transform='translate(-7.3 -7.3)'%3e%3cline x1='14.6px' y1='14.6px' x2='100%' y2='100%' stroke-width='3' stroke='%23000' stroke-dasharray='3' /%3e%3c/g%3e%3cg transform='translate(-8 -8)'%3e%3cline x1='16px' y1='16px' x2='100%' y2='100%' stroke-width='1' stroke='%23fff' /%3e%3c/g%3e%3c/svg%3e");
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}