头像下方的线？

开发
1

大家好，我想知道是否有人知道如何在头像下方显示一条线。我在 Figma 的论坛上看到了，我觉得它看起来很酷。

1 个赞
2

欢迎 paranoya！

（一个 Sigma 示例链接供参考：https://forum.figma.com/t/introduce-yourself/102/2）

这确实是一个不错的自定义。

您可以通过此指南了解他们是如何做到的：

这将帮助您对论坛进行许多视觉自定义。

在 Figma 中，我们可以这样定位行元素：

image
image2498×1440 288 KB

他们将此添加到他们的主题 CSS 中：

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;
}

但需要调整一些值，才能在您自己的论坛上达到最佳效果。

他们的垂直线看起来很棒，因为他们还消除了每篇帖子之间的水平线。

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;
}

稍作调整，您就可以实现类似的效果：

image
image825×1179 60.3 KB

1 个赞
3

没想到这么快就得到答复了。非常感谢！

2 个赞
4

不客气，我们很乐意为您效劳！ :hugs:

2 个赞
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.