我可以使CSS：在伪元素追加内容之后的元素？ [英] Can I make the CSS :after pseudo element append content outside the element?

问题描述

我想使用相邻链接之间的HTML & raquo; 实体格式化链接的面包屑跟踪，因此它如下所示：

首页» 关于我们» 历史»此页

我向我的CSS添加了一个规则：

  nav＃breadcrumb-trail a：after {
 content：»; 
} 
  

但这是添加实体INSIDE的链接，我得到这个：

首页» 关于我们» 历史» 此页

我误解CSS 的行为：伪元素？文档似乎暗示它在之后添加指定的内容，而不是将其添加到元素的容器的内部。任何想法？

解决方案

通常你将这些菜单编码为有序列表，所以这样做是有意义的： div class =snippetdata-lang =jsdata-hide =false>

 ＃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>我的惊人面包屑菜单< / h1> < ol> < li>< a href =>关于< / a>< / li> < li>< a href => fos< / a>< / li> < / ol>< / nav>  

I want to format a breadcrumb trail of links using an HTML » entity between adjacent links, so it looks like this:

home » about us » history » this page

I've added a rule to my CSS:

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

but this is adding the entity INSIDE the link, instead of outside it - i.e. I'm getting this:

home » about us » history » this page

Am I misunderstanding the behaviour of the CSS :after pseudo-element? Documentation seems to imply it adds the specified content after the specified element, rather than prepending it to the inside of the element's container. Any ideas?

解决方案

Normally you code these menus as ordered lists anyway, so it makes sense to do something like this instead:

#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>

这篇关于我可以使CSS：在伪元素追加内容之后的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！