Sass mixin to control text underline (designed for use with PrinceXML)

underline-control.scss

@mixin underlined($thickness,$start-position,$end-position,$vertical-position) {
    display: inline-block;
    position: relative;
    &:after {
        content: "";
        position: absolute;
        display: inline-block;
        left: $start-position; // 0 is flush with start of text
        right: $end-position; // 0 is flush with end of text
        bottom: $vertical-position; // Positive units move underline closer to text, negative units further away
        border-bottom: $thickness solid; // Will inherit font color
        z-index: -1; // Underline falls beneath the text
    }
}

// // Example usage:
// .underlined {
//   @include underlined(0.02em,0.4em,0,0.3em);
// }