我有这个插入符号不会按预期显示

我试图创建一个插入符号，这个代码看起来没问题，但是我的插入符号根本不显示。我有这个插入符号不会按预期显示

验证码：

.caret { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.caret:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 12px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid white; 
 
}

<li> 
 
    <a href="#"> 
 
    <h3>Home</h3> 
 
    </a> 
 
    <span class="caret"> 
 
</li>

这一点我坚信应该是工作。任何人都可以告诉我为什么它在其他方面吗？

来源

2016-11-15 pedroyanky

尝试关闭'<跨度类= “^符号”>''与'。也许你没有看到你的脱字符号，因为它在白色背景上有白色边框？ – Justinas

只是这样做，但仍然没有。有没有什么问题，我的html的CSS – pedroyanky

您的.caret是白色的，在白色背景上不可见。所以改成另一种颜色。

h3 { 
 
    display:inline-block; 
 
} 
 
.caret { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.caret::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 12px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid black; 
 
}

<li> 
 
    <a href="#"> 
 
    <h3>Home</h3> 
 
    </a> 
 
    <span class="caret"></span> 
 
</li>

来源

2016-11-15 07:00:15

谢谢塞巴斯蒂安，但插入符号是在彩色背景上创建的。有没有办法有白色的意义？ – pedroyanky

提供了一个错误的例子。也许有一个项目覆盖了插入符号或其他一些我们不知道的问题（我们在你的例子中看不到）。 –

尝试此

.caret { 
 

 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.caret::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 12px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid #000; 
 
}

<li><a href="#"><h3>Home</h3></a><span class="caret"></li>

来源

2016-11-15 07:05:22

我有这个插入符号不会按预期显示

回答

相关问题