Question

标记：

<h1 class="title">Hello World</h1>

CSS：

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

演示：http://codepen.io/anon/pen/HDBqe

我想根据文字的宽度更改.title:after的宽度，如何使用javascript更改:after的宽度？

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

$('.title').each(function(){
  // Change :after's width based on the text's width
  // .css('width', $(this).textWidth());
});

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').each(function(){
  $(this).css('width', $(this).textWidth());
});

Answer 2

伪元素不是DOM的一部分。因此，您无法直接通过JS更改其CSS属性。

为了按照你想要的方式获得你想要的效果，我最好的猜测是YUI.StyleSheet并操纵样式表本身，尽管我不得不承认我没有近年来我自己测试了它。

包含这样的实用程序并进行所有这些计算似乎对宽度匹配有很多工作。

如果您愿意在语义HTML方面做出一点妥协，那么有一种可行的技术：

您的元素占据屏幕的整个宽度。使用跨度包装文本并将伪元素添加到该文本，inline-block应允许您仅在文本下获取边框

HTML：

<h1 class="title"><span>Hello World</span></h1>

CSS：

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

.title span{
    display:inline-block;
    position:relative;
}

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

这是my version of the codePen。

供将来参考：

有一个W3C Candidate Recommendation表明了为content以外的CSS属性使用属性的功能。

这样，如果推荐被批准和实施，则可以让伪元素反映父母的属性，如下：

this.setAttribute("length", $(this).textWidth());

添加了CSS

.title span {
    border-bottom: 3px solid red;
}

JQuery的

$('.title').wrapInner('<span />');

Answer 4

只需一个简单的技巧，任何伪元素都可以更改（或者至少替换为其他元素）：

＆＃13;

$('.something').click(function(){
  $(this).toggleClass('to_show');
});

＆＃13;

.something
{
  background: red;
  height: 40px;
  width: 120px;
  position: relative;
}
.something.to_show:after
{
  content: "X";
  color: white;
  background: green;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: block;
  text-align: center;
}
.something:after
{
  content: "O";
  color: white;
  background: blue;
  width: 30px;
  height: 25px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: block;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div class="something">
      click here!
    </div>
  </body>
</html>

＆＃13;

修改伪元素：使用javascript后的宽度

4 个答案:

供将来参考：

添加了CSS

JQuery的