更换或添加代码与CSS

这是一个挑战，不知道这甚至有可能，但这里是我的问题，以HTML格式：更换或添加代码与CSS

我没有完全进入网站。我唯一能做的就是编辑我的外部CSS。

菜单代码：

<ul id="navPrimary" class="nav"> 
    <li id="navLink1"><a href="#">Link1</a></li> 
</ul>

我想添加为名单上的第一个位置：

<li id="navHome"><a href="/"><i class="icon-home"></i></a></li>

我可以要求系统管理员添加链接到首页，但他的代码看起来像这样：

<li id="navHome"><a href="/">Home</a></li>

所以仍然会有替换文字Home机智的问题h我的<i class="icon-home"></i>。

关于CSS的唯一出现在我脑海里的是:before,:after和content，但不太清楚如何使用它。和以前一样，我尝试添加单个单词。

EDIT1

我已经厌倦了这一点：

#navLink1:before{ content:'<li id="navHome"><a href="/"><i class="icon-home"></i></a></li>'; }

但这只是添加HTML代码为文本。

来源

2015-04-22 Solver

谷歌是你的朋友http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/ – Huangism

HTML in content attribute不起作用。 – jerrylow

如果你不想使用伪元素来做到这一点，你可以只隐藏链接文本，并添加图标作为背景。要删除文本，你做

display: inline-block; /* or block */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap;

然后添加背景图片，样品：

http://codepen.io/anon/pen/vOYmoQ

这仍然需要管理员添加为你的链接。

来源

2015-04-22 17:33:24 jerrylow

这一点，唯一可用的解决方案。工作完美。 – Solver

用：前和：后您可以将内容添加到您的HTML文档。即使你也可以添加一个图标。

为如

#navHome:before { 
    content:''; 
    display:block; 
    float:left; 
    width:20px; /* this must be the icon width*/ 
    height:20px; /* this must be the icon height*/ 
    background: url(icon.png) 0 0 not-repeat; 
}

来源

2015-04-22 17:21:13

这可以在视觉上工作，但他需要链接回家。 – jerrylow

如前所述“我可以向系统管理员添加链接到首页，但他的代码看起来是这样的：”在OP唯一的问题是可以用CSS – Huangism

啊@Huangism感谢要做的图标，在这种情况下，那么就没有必要对于伪元素。 – jerrylow

更换或添加代码与CSS

回答

相关问题