我想将管道标志设计为链接的分隔符

嗨，我试图使用span标签将管道符号（|）作为链接的分隔符。但它不会风格。我想将管道标志设计为链接的分隔符

<ul> 
    <li><a href="http://www.myhome.com">Home<span class="separator">|</span></a></li> 
    <li><a href="http://www.aboutme.com">About<span class="separator">|</span></a></li> 
    <li><a href="http://www.contactus.com">Contact<span class="separator">|</span></a></li> 
    <li><a href="http://www.learnmore.com">Learn more</a></li> 
</ul> 


<style> 
.separator{ 
font-size: 1.5em; 
    color: red; 
} 
</style>

来源

2016-08-11 pedroyanky

这应该是关闭的印刷错误（offtopic） –

@MarcosPérezGude或者它可以被回答，这对OP更有用。 – dfsq

这是一个问答社区，而不是论坛。如果规则说印刷错误是不重要的话，那么这个问题就不重要了。不再。 –

你忘了分号：

.separator{ 
    font-size: 1.5em; /* <= missing semicolon */ 
    color: red; 
}

来源

2016-08-11 07:42:40 str

我有疑问。使用'：after'和'not（last）'来更好地使用'style：'或者像上面那样使用额外的HTML来完成。哪个更好？我知道这与这个问题或解决方案无关。只是好奇 –

好吧，这是它没有工作的原因。使用'：after'可能会有效，在某些情况下，它可能不会更好/更干净。它完全取决于用例和其他样式。 – str

，而不是在HTML中使用它，在使用它的：伪元素，如：before或：after

li { 
    position: relative; 
} 

li:before { 
    content: '|'; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

，是的，你错过了font-size: 1.5em;之后的分号，正如@str所提到的

来源

2016-08-11 07:43:22 Lucian

尽管确实如此，但使用HTML也很好，但这并不能解释为什么OP有这个问题。 – dfsq

@Lucian，你的伪元素声明似乎令人费解，为什么包含位置属性？ – pedroyanky

，这样它就不会占用任何空间。你可以使用'inline-block'代替。这是你的选择。你所需要的只是'content：'|';' – Lucian

我想将管道标志设计为链接的分隔符

回答

相关问题