使用 javascript 修改伪元素 :after 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18694168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify pseudo-element :after's width using javascript
提问by Jürgen Paul
Markup:
标记：
<h1 class="title">Hello World</h1>
CSS:
CSS：
.title {
border-bottom: 3px solid #aaa;
position: relative;
}
.title:after {
content: "";
width: 100px;
border-bottom: 3px solid red;
display: block;
position: absolute;
}
Demo: http://codepen.io/anon/pen/HDBqe
演示：http: //codepen.io/anon/pen/HDBqe
I wanted to change the .title:after's width based on the text's width, how do I change :after's width using javascript?
我想.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());
});
采纳答案by MasterAM
A pseudo-element is not part of the DOM. Therefore, you cannot change its CSS properties directly through JS.
伪元素不是 DOM 的一部分。因此，您不能直接通过 JS 更改其 CSS 属性。
In order to get your desired effect the way youwant it, my best guess would be YUI.StyleSheetand manipulate the stylesheet itself, although I have to admit I haven't tested it myself in recent years.
为了得到你想要的效果的方式，你想要的话，我最好的猜测是YUI.StyleSheet和操纵样式表本身，虽然我不得不承认我没有在最近几年测试它自己。
Including such a utility and doing all of this calculation seems like a lot of work for width matching.
包括这样一个实用程序并完成所有这些计算似乎是宽度匹配的大量工作。
If you are willing to compromise a little bit on the semantic HTML, there is a working technique:
如果你愿意在语义 HTML 上妥协一点，有一种可行的技术：
Your element takes the entire width of the screen. Wrapping the text with a span and adding the pseudo-element to that, as an inline-blockshould allow you to get the border under the text only
您的元素占据屏幕的整个宽度。用跨度包裹文本并向其添加伪元素，因为inline-block应该允许您仅在文本下方获得边框
HTML:
HTML：
<h1 class="title"><span>Hello World</span></h1>
CSS:
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;
}
Here is my version of the codePen.
For future reference:
备查：
There is a W3C Candidate Recommendationthat suggests the capability of using attributes for CSS properties other than content.
有一个W3C Candidate Recommendation建议使用属性来处理 CSS 属性而不是content.
This way, if and when the recommendation is approved and implemented, it might be possible to have the pseudo-element reflect the parent's attributes, as such:
这样，如果当建议被批准和实施时，就可以让伪元素反映父元素的属性，例如：
this.setAttribute("length", $(this).textWidth());
And the relevant CSS:
以及相关的 CSS：
.title:after {
...
width: attr(length px);
...
}
回答by Terite
I've found a trick which works in this case. I've updated your demo:
我发现了一个在这种情况下有效的技巧。我已经更新了你的演示：
http://codepen.io/anon/pen/bHLtk
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;
}
Notice, that .title:afterhas width set to inheritbut his parent (.title) has overridden widthwith min-width. Now I can freely to set width by JavaScript to title and it take effect only on his nested pseudoelement:
请注意，是.title:after有宽度设置为inherit，但他的父母（.title）已覆盖width用min-width。现在我可以自由地通过 JavaScript 将宽度设置为 title 并且它只对他的嵌套伪元素生效：
$('.title').each(function(){
$(this).css('width', $(this).textWidth());
});
回答by gvee
How's this for a different approach.... http://jsfiddle.net/mayYt/
对于不同的方法，这如何.... http://jsfiddle.net/mayYt/
Added CSS
添加了 CSS
.title span {
border-bottom: 3px solid red;
}
JQuery
查询
$('.title').wrapInner('<span />');
回答by Zsolti
With just a simple trick any pseudo-element can be changed (or at least replaced with something else):
只需一个简单的技巧，就可以更改任何伪元素（或至少用其他东西替换）：
$('.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>