javascript - 修改伪元素:after's width using javascript

Question

<分区>

Answer 1

我发现了一个适用于这种情况的技巧。我已经更新了你的演示:

http://codepen.io/anon/pen/bHLtk

.title {
  border-bottom: 3px solid #aaa;
  position: relative;
  min-width: 100%;
}

.title:after {
  content: "";
  width: inherit;
  border-bottom: 3px solid red;
  display: block;
  position: absolute;
}

请注意，.title:after 的宽度设置为 inherit 但他的父级 (.title) 已覆盖 width 与 min-width。现在我可以自由的通过JavaScript给title设置width了，并且只对他嵌套的伪元素生效:

$('.title').each(function(){
  $(this).css('width', $(this).textWidth());
});