13

标记：

<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根据文本的宽度更改 ' 的宽度，如何:after使用 javascript 更改 ' 的宽度？

$.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());
});
4

4 回答 4

16

我发现了一个在这种情况下有效的技巧。我已经更新了你的演示：

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());
});
于 2014-02-12T21:16:23.563 回答
4

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

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

包含这样一个实用程序并进行所有这些计算似乎需要大量的宽度匹配工作。

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

您的元素占据了屏幕的整个宽度。用 span 包裹文本并将伪元素添加到其中，因为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;
}

这是我的 codePen 版本。

备查：

有一个W3C Candidate Recommendation建议使用 CSS 属性以外的属性的能力，而不是content.

这样，如果建议被批准和实施，则可以让伪元素反映父级的属性，如下所示：

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

以及相关的 CSS：

.title:after {
    ...
    width: attr(length px);
    ...
}
于 2013-09-09T09:48:36.307 回答
1

这是一种不同的方法如何...... http://jsfiddle.net/mayYt/

添加了 CSS

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

jQuery

$('.title').wrapInner('<span />');
于 2013-09-09T11:33:24.903 回答
0

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

$('.something').click(function(){
  $(this).toggleClass('to_show');
});
.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;
}
<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>

于 2017-01-26T20:52:10.013 回答