伪元素边距不在外部

Question

我不确定这是怎么回事，但是我无法获得元素内部伪元素的边距。相反，它不在父级之外。我已经尝试了所有clear, float, overflow, box-sizing etc.的功能，但是这次无法正常工作。有什么建议吗？

jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  var signaturePad = new SignaturePad(signaturePadCanvas);
});

.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
</div>