html - 如何制作下标光标？

Question

我已经使用下面的代码制作了一个上标光标。如何将光标制作为下标？

@-webkit-keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: red }
}

@-moz-keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: red }
}

body {
    width:1px;
    height:9px;
    border-left:5px solid red;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
}

Fiddle Link

输出:

如何放置如下:

Answer 1

我能够对其进行一些边框和填充修改:

@-webkit-keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: red }
}

@-moz-keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: red }
}

body {
    width:0px;
    height:2px;
    padding-bottom:9px;
    padding-left:5px;
    border-bottom:10px solid red;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
}

subscript