时间戳

首页 > 解决方案 > CSS :after 元素仅在刷新时短暂闪烁

css - CSS :after 元素仅在刷新时短暂闪烁

问题描述

这是我正在开发的网站：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;
}

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

标签： css

解决方案

在您的 css 文件中删除并添加以下:aftercss 。svg将您的:afterCSS添加svg到a.hidebtn. 希望这可以帮助。谢谢

a.hidebtn:after {
content: "";
position: absolute;
left: 20px;
top: 34px;
margin-left: -10px;
bottom: -10px;
border-top: 10px solid #249EBD;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

推荐阅读