根据父元素的宽度设置 :after 伪元素的边框宽度答案

【问题标题】：Setting the border-width of a :after pseudo-element based on the parent element's width根据父元素的宽度设置 :after 伪元素的边框宽度
【发布时间】：2011-12-28 17:53:19
【问题描述】：

首先，我实现了aren't part of the DOM 的伪元素，因此不能用jQuery 作为目标。我想知道是否可能有另一种方式（纯 css，或 jQuery 的一些创造性使用）来设置：after 伪元素（在本例中为边框宽度）的属性取决于父元素的宽度。

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

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

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

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

【问题讨论】：

能否将相关的 HTML 标记和 CSS 添加到帖子中，以便我们重现此内容？也许更进一步，设置一个jsfiddle.net 演示？我明白你想要做的，但考虑到更宽的导航项将意味着使用这个技巧更宽和更高的三角形（它们不会对齐）或者它意味着每个三角形的不同角度。请解释你想要发生的事情。
更新了 OP，带有指向 jsfiddle 演示的链接。我希望每个三角形都有不同的角度和一致的高度。

标签： jquery css pseudo-element

【解决方案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 看起来会更好。

【讨论】：

我只是最终选择了固定宽度的列表项 - 在文本周围使用可变填充肯定比在尖头部分的可变角度看起来要好得多。

【解决方案2】：

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

我假设您希望三角形的高度相等，这意味着它们需要适应最宽三角形所需的高度。因此，类似于以下内容，它是真实/伪代码的组合（尽管还有其他构建 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，还有其他方法可以实现规则创建。

【讨论】：