Question

这是我正在使用的网站：https://zemmyang.github.io/jaguar-sundae/，可以在这里查看代码：https://github.com/zemmyang/jaguar-sundae，并且我正在按照教程在此处制作箭头：https://css-tricks.com/snippets/css/css-triangle/。

如果刷新网站，则会在标题文本（“工作历史”，“位置”等）下方看到细小的箭头，但在页面完全加载后它们消失了。我已经尝试过使用Chrome和Firefox。

这是设置标题文本样式的代码：

.title .cat-title {
    margin-right: 5px;
    display: inline-block;
    padding-bottom: 10px;
    position: absolute;
    left: 0;
    background: #249EBD;
    padding: 10px;
    color: white;
    min-width: 40px;
    text-align: center;
    top: -6px;
    min-height: 40px;
    padding-bottom: 13px;
    border-radius: 5px;
}

.title .cat-title:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -10px;
    bottom: -10px;
    border-top: 10px solid #249EBD;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

问题是，它曾经在the original中工作，它使用了不同的字体集（Font Awesome 4.something）。我需要新的图标，所以我切换到最新版本的Font Awesome（5.7.2），现在遇到了这个问题。我根本没有接触过CSS。

Answer 1

删除:after中的svg，然后在css文件中的css下方添加。将:after的{{1}} css添加到了svg。希望这可以帮助。谢谢

a.hidebtn

CSS：after元素仅在刷新时短暂闪烁

1 个答案: