Question

这是一个挑战，并不确定这是否可能，但这是我的问题：

我无权访问该网站。我唯一能做的就是编辑我的外部CSS。

菜单代码：

<?php

    $ach_json = json_decode ( $ach, true );

    for($i = 0; $i < count ( $ach_json ); $i ++) {
        echo "<ng:switch on='edit'>";

        echo "<div ng:switch-when='true'>";

        $title = $ach_json [$i] ['title'];
        echo "<h3>title $title</h3><br>";
        echo "<input type='image' src='http:'..'  name='edit' value='$i' ng-click='editClick()'>";   
        echo "</div>";
        echo "<div ng:switch-when='false'>";
        echo "Title: <input type='text' ng-model='title' value=$title> <br>";
        echo "<button ng-click='updateRequest()'>update</button>";
        echo "</ng:switch>";
    }
?>
</form>

我想将其添加为列表中的第一个位置：

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

我可以要求系统管理员添加指向Home的链接，但他的代码将如下所示：

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

因此，使用<li id="navHome"><a href="/">Home</a></li>替换文字Home时仍会出现问题。

关于CSS，我唯一想到的是<i class="icon-home"></i>，:before和:after，但不太确定如何使用它。和以前一样，我尝试添加单词。

EDIT1

我已经厌倦了这个：

content

但是这只添加了html代码作为文本。

Answer 1

使用：before和：之后可以向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;
}

Answer 2

如果您想在不使用伪元素的情况下这样做，您可以隐藏链接文本并将图标添加为背景。要删除您执行的文本

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

然后将背景添加为图像，示例：

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

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

使用CSS替换或添加代码到HTML

2 个答案: