scss 倾斜文字高亮（标记式）效果SASS mixin

Posted 2021-05-18

//Adapted for non-italic 13px Arial text
@mixin slanted-highlight($bgcolor, $element: span) {
#{$element} {background:$bgcolor;}
#{$element}:before {border-bottom:15px solid $bgcolor; border-left:4px solid transparent; content:""; display:inline-block; height:0; left:-4px; top:3px; width:0; position:relative;}
#{$element}:after {border-top:15px solid $bgcolor; border-right:4px solid transparent; content:""; display:inline-block; height:0; left:4px; top:3px; width:0; position:relative;}
}