无论如何要创建比 div 高度短的右边框吗？

Question

我有一盒社交媒体内容如下：

 1  |   2   |   3

无论如何要制作“|” 比 div 高度短？

Answer 1

您可以使用:after，请参阅此jsfiddle http://jsfiddle.net/mLycophq/2/ 您的管道与您的文本一样高div，或者您可以通过更改它font-size。

div{
    height:20px;
    background-color:red;
    margin: 0 10px;
    padding: 10px;
    display: inline-block;
}

div:after{
    content: "|";
    color:black;
}

或者有财产border。

div:after{
    content: "";
    color:black;
    border-right:1px solid black;
    font-size: 10px;
}