根据父元素的宽度设置a：after伪元素的边框宽度

Question

首先，我实现了伪元素aren't part of the DOM，因此不能用jQuery作为目标。我想知道是否有另一种方式（纯css，或jQuery的一些创造性使用）来设置一个属性：after伪元素（在这种情况下为border-width）依赖于父元素的宽度。 / p>

我正在使用this article中描述的技术设置导航菜单样式，但希望将三角形部分设置为导航元素的整个宽度：

但是，导航元素不会全部或始终具有相同的宽度，因此需要根据父元素的宽度设置边框宽度。有关如何实现这一目标的任何建议吗？

编辑：添加了一个jsfiddle演示：http://jsfiddle.net/bcAQc/1/

注意：出于某种原因，我必须在jsfiddle的：after伪元素而不是在我的网站上为top和left设置不同的值。在我的网站上，以及我上面链接的示例文章中，top设置为100％，left设置为50％。

Answer 1

我认为Scott在说钱时是对的：

  

CSS不允许百分比值生成边框宽度（在这种情况下这将是理想的。

由于你有这个标记为“jquery”，我假设你对jquery解决方案持开放态度？我担心这可能不会只用CSS，使用边框/三角形技巧。当然javascript打开这是多种可能的解决方案，这里是一个：

演示：http://jsfiddle.net/bcAQc/2/

$('a').each(function(){
    var self = $(this),
        width = (self.width() / 2) + 10; // +10 for <a> padding
    self.append('<span class="triangle" />');
    $('.triangle', self).css({
        'border-left-width' : width,
        'border-right-width' : width
    });
});

.triangle {
    position: absolute;
    border: 40px solid transparent;
    border-top-color: blue;
    display:block;
    top:20px;
    left: 0;
}

虽然这似乎符合你的要求，但我发现the demo中的不同角度让它看起来很难看。如果是我，我会考虑固定宽度的列表项：它只会使CSS完全成为可能，而IMO看起来会更好。

Answer 2

由于CSS不允许百分比值生成边框宽度（这在这种情况下是理想的），我认为您唯一的解决方案是动态编写css规则（向style添加head标记然后，元素通过JQuery）根据运行时nav标签的宽度构建三角形的宽度和高度。

我假设您希望三角形的高度相等，这意味着它们需要适应最宽三角形所需的高度。所以类似下面的内容，它是真实/伪代码的组合（虽然还有其他构建css规则的方法），你需要在导航的每个元素上设置一个类（这假定为li元素已设置为position: relative）：

$("<style type='text/css'> 
 #Nav li:after { 
     content: ''; 
     display: block;
     width: 0;
     height: 0;
     position: absolute;
     top: 100%;
     left: 0;
     border-style: solid;
     border-color: transparent;
     border-top-color: blue; /* your desired color of the triangle */
     border-width: ??px; /* set this to the calculated value of your desired standard height; I believe it should be at least 25% of the width of the widest nav element */
 } 

 #Nav li.yourNavElement1Class:after {
     border-left-width: ??px;  /* 50% of NavElement1 width */
     border-right-width: ??px; /* 50% of NavElement1 width */
 }

 #Nav li.yourNavElement2Class:after {
     border-left-width: ??px;  /* 50% of NavElement2 width */
     border-right-width: ??px; /* 50% of NavElement2 width */
 }

 #Nav li.yourNavElementEtcClass:after {
     border-left-width: ??px;  /* 50% of NavElementEtc width */
     border-right-width: ??px; /* 50% of NavElementEtc width */
 }
 </style>").appendTo("head");

请注意，此规则编写基于此问题的答案：Create a CSS rule / class with jQuery at runtime，还有其他方法可以实现规则创建。