我可以制作CSS：在伪元素之后追加元素之外的内容吗？

Question

我想在相邻链接之间使用HTML »实体格式化链接的痕迹痕迹，所以它看起来像这样：

  

home»about us»history»此页

我在CSS中添加了一条规则：

nav#breadcrumb-trail a:after {
    content: " » ";
}

但是这是在链接中添加实体，而不是在它之外 - 即我得到了这个：

  

home » about us » history » 此页

我是否误解了CSS :after伪元素的行为？文档似乎暗示它在指定元素之后添加指定内容，而不是将其添加到元素容器的内部。有什么想法吗？

Answer 1

spec说：

  

正如其名称所示，：before和：after伪元素指定元素文档树内容之前和之后的内容位置。

注意句子末尾的关键短语，指的是内容（或内部文本）。因此，伪元素将插入指定元素内容中的末尾。因此，在您的超链接的文本之后插入正确的双角度引用，而不是在超链接之后。

这是一个带有两个伪元素的链接的DOM元素树的直观表示：

a
  a:before
  content
  a:after

我想这种行为的一种解决方法是将每个链接包装在span中，然后将样式应用到nav#breadcrumb-trail span:after，但这样会导致不必要的标记......值得一试虽然。

Answer 2

通常你将这些菜单编码为有序列表，所以有意义的做这样的事情：

#breadcrumb-trail ol { 
    list-style: none; 
    margin: 0;
    padding: 0; 
}

#breadcrumb-trail li { 
    display: inline; 
}

#breadcrumb-trail li:after { 
    content: ' » '; 
}

#breadcrumb-trail li:last-child:after { 
    content: none; 
}

<nav id="breadcrumb-trail">
    <h1>My Amazing Breadcrumb Menu</h1>
    <ol>
        <li><a href="">about</a></li>
        <li><a href="">fos</a></li>
    </ol>
</nav>

Answer 3

鉴于CSS的灵活性和awesomeness，它看起来非常可行。在当前的Chrome，FF和IE中尝试了这一点，它可以按预期完成工作，而无需添加附加标记：

#box {
  width: 100px;
  height: 100px;
  background: #eee;
  position: relative;
}

#box:after {
  content: '...appended text outside box';
  position: absolute;
  margin-left: 100%;
  left: 0;
  width: 200px;
}

<div id="box">
  Some Box
</div>

小警告：绝对定位的`元素包含在框的维度中，因此在其旁边浮动或对齐的元素无法动态地尊重伪元素内容的宽度。