css - 如何使用css在斜线旁边添加数字并做出反应？

Question

我想在斜杠旁边添加一个数字，如下所示

我试过如下

render = () => {
    return (
        <Text size={25} weight={700} color={availableMobileUserCountColor}>
            {availableMobileUsersCount}
        </Text>
        <Text size={14} weight={700} color={theme.colors.text}>
            /40
        </Text>
    )
}

并且 Text 组件返回 span 元素

const Text = styled.span<Props>`
    margin: 0;
    padding: 0;
    font-size: ${p => p.size || 16}px;
    font-weight: ${props => props.weight || 400};
    color: ${props => props.color};
`;

对于上面的代码，它看起来像这样，

如您所见，斜线和数字 40 向上，它们应该在下方。我该怎么做。有人可以帮我解决这个问题。谢谢。

标签： cssreactjs

Answer 1

您可以使用子标签

return <p>{availableMobileUsersCount}<sub>/40</sub</p>;