gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 02:35:49 25 4
gpt4 key购买 nike

<分区>

标记:

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com