html - 无论如何要创建比 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;
}