在不引入 Javascript 或添加到 HTML 的情况下，这是否可能？答案

【问题标题】：Is this possible without introducing Javascript or adding to the HTML?在不引入 Javascript 或添加到 HTML 的情况下，这是否可能？
【发布时间】：2015-06-07 16:16:20
【问题描述】：

我的客户想要每一个链接列表，也就是表单的每一个列表

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
</ul>

使列表的项目符号与链接文本的颜色相同，但每个非链接列表，即表单的每个列表

<ul>
     <li>Here's a regular list item</li>   
     <li>Here's a regular list item</li>
     <li>Here's a regular list item</li>
</ul>

应该像往常一样继承其项目符号和相应的文本。

小提琴：http://jsfiddle.net/0kkc2rz4/

由于无法将类添加到 HTML 中，我受到了限制，因此类似于

<ul class='link-list'>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
</ul>

ul.link-list li { color: #004E98; }

是不可能的，尽管我意识到如果我从头开始编写网站代码，这显然是最好的方法。我可以添加 JS，但不希望添加。

【问题讨论】：

在问题的标题中说出你想要做什么。
这是您问题的答案：stackoverflow.com/questions/1014861/… - 摘要：截至目前，纯 CSS 无法做到这一点
你能添加 Font Awesome (fortawesome.github.io/Font-Awesome) 吗？如果是这样，它会有所帮助

标签： html css

【解决方案1】：

这是一个使用伪元素和 unicode 字符作为要点的解决方案。基本思想是将a 项目符号“重叠”在li 项目符号上，从而产生不同的效果。

ul{
  margin:0em;
  padding:0em;
  list-style:none;
  padding:20px 20px 0px 20px;
  font-family:sans-serif;
}


li{
  margin:0em;
  padding:0em;
  padding-bottom:10px;
}

a{
  color:red;
  text-decoration:none;
}

a:hover{
  color:green;
}

a, li{
  position:relative;
}

a:before, li:before{
  content:'\2022';
  position:absolute;
  left:-0.5em; 
  color:inherit;
}

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        Here's a regular list item       
    </li>
</ul>

【讨论】：

那么如果不使用 :before 选择器（基本上）重新创建项目符号，就没有办法做到这一点吗？这似乎只是需要选择某物的父级的另一种情况，而这在 css 中是无法完成的。我希望看到一个奇怪的解决方案，它可能涉及 :not 选择器之类的东西，但我认为没有。
@ferr 我不知道，不幸的是。在幕后，浏览器最终只是在做同样的事情：为每个列表项添加一个•:before。这只是对a 标签做同样的事情并将它们重叠。我们只需要对li 再次执行此操作即可进行跨浏览器规范化。

【解决方案2】：

玩一点伪元素：http://jsfiddle.net/2acw2hae/1/

ul { list-style: none; }

ul a { position: relative; }

ul a:before { 
    content : "\25CF"; /* unicode for black circle */
    font-size: 0.75em; 
    margin-right: .5em;
}

/* this overlaps the text-decoration under the bullet */
ul a:after { 
    content : "";
    position: absolute; 
    bottom: 0; left: 0; 
    height:4px; 
    width: .5em; 
    background: #fff; 
}

结果

【讨论】：