Question

我想用CSS将一个字符应用到我的一些HREF的末尾，我找到了一种有效的方法，但它也将这个字符应用于锚点。我不想要我的锚点上的角色。到目前为止，我只能将属性应用于整个DIV，我无法坚持使用一个简单的类，我可以选择性地仅应用于HREF。

以下是我所拥有的：

#sample a:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for &raquo; */
}

有什么建议吗？

我的DIV确实拥有一些链接样式，我需要移动它吗？例如：

#sample a:hover {
    color:#CCCCFF; 
    text-decoration:underline; 
    margin-top:20px;
}

我的老板说：让网站上的所有链接都有这个字符，除了我们说不应该有的链接。当然，他没有工作实例向我展示。

Answer 1

只需使用a[href] {这意味着定位所有设置了href属性的锚元素。可以在W3C specification上找到更多信息。

Example.

<强> HTML

<a href="#link" id="link">link</a>
<br />
<a id="anchor">anchor</a>

<强> CSS

a[href]:after {
  position: absolute; /* Prevent underline of arrow */
  padding-left:2px; /* Add a little space between text and arrow */
  content: "\00bb"; /* Unicode hex for &raquo; */
}

Answer 2

一般来说，在CSS中引用链接的最常见的浏览方式是使用:link和:visited伪元素（分别代表未访问和访问过的链接）而不是选择器{{ 1}}：

在这种情况下，您也可以使用更简单的方法来使用属性选择器，因为您也使用#sample :link:after, #sample :visited:after伪类（并且它的支持略少于属性选择器）：< / p>

:after

最简单的是，不要将#sample a[href]:after元素用于链接以外的目的。不推荐使用a，而是赞成在某些自然元素上使用<a name=...>属性。

添加：问题还在于阻止选定链接的箭头。这可以实现，以便您在这些链接上使用id等属性指定选择，并添加一个CSS规则，将生成的内容设置为空为它们：

class=noarrow

由于浏览器支持问题，这可能是比使用#sample :link.noarrow:after, #sample :visited.noarrow:after { content: ""; }选择器更好的方法。但是在现代浏览器中，以下方法也适用：不使用两个规则，只使用一个排除特定类的规则：

:not(...)

如何防止箭头下划线（生成的内容）是另一个问题。问题中使用的技巧似乎不适用于IE。此外，它使箭头覆盖文本。我对这个问题没有好的答案，我认为最好将其作为一个单独的问题进行讨论（除非你能在现有问题中找到它）。

Answer 3

我会在锚点上添加一个类名，并覆盖链接上使用的声明的CSS。

如何申请：之后链接，而不是锚点？

3 个答案: