Javascript 引导按钮下边框宽度为百分比

我有一个引导式自定义按钮：

.btn
{
背景色：#DB631E；
边框颜色：#DB631E；
}
.btn海关{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
宽度：170px；
高度：120px；
边框样式：实心；
边框底色：#1252cf；
边框底宽：5px；
字体大小：22px；
填充：47px 22px；
}
.btn自定义：焦点，
.btn-custom.focus{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：悬停{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
宽度：200px；
高度：150像素；
边框样式：实心；
边框底色：#1252cf；
边框底宽：5px；
}
.btn自定义：活动，
.btn-custom.active，
.open>.dropdown-toggle.btn-custom{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：活动：悬停，
.btn自定义。活动：悬停，
.open>.dropdown toggle.btn自定义：悬停，
.btn自定义：活动：焦点，
.btn自定义。活动：焦点，
.open>.dropdown toggle.btn自定义：焦点，
.btn自定义：active.focus，
.btn-custom.active.focus，
.open>.dropdown-toggle.btn-custom.focus{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：活动，
.btn-custom.active，
.open>.dropdown-toggle.btn-custom{
背景图像：无；
}
.btn-custom.disabled，
.btn自定义[已禁用]，
字段集[已禁用]。btn自定义，
.btn自定义。禁用：悬停，
.btn自定义[禁用]：悬停，
字段集[已禁用]。btn自定义：悬停，
.btn自定义。禁用：焦点，
.btn自定义[禁用]：焦点，
字段集[已禁用]。btn自定义：焦点，
.btn-custom.disabled.focus，
.btn自定义[已禁用]。焦点，
字段集[已禁用].btn-custom.focus，
.btn自定义.禁用：活动，
.btn自定义[禁用]：活动，
字段集[已禁用]。btn自定义：活动，
.btn-custom.disabled.active，
.btn自定义[已禁用]。处于活动状态，
字段集[已禁用].btn-custom.active{
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn定制.徽章{
颜色：#5bc0de；
背景色：#fff；
}

---

默认值

只需从按钮中删除边框并添加伪元素（高度为5px，宽度为70%，背景颜色和位置正确）

.btn
{
背景色：#DB631E；
边框颜色：#DB631E；
}
.btn海关{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
宽度：170px；
高度：120px；
字体大小：22px；
填充：47px 22px；
位置：相对位置；
}
.btn海关：之前{
内容：''；
位置：绝对位置；
高度：5px；
左：50%；
底部：-5px；
宽度：70%；
转化：translateX（-50%）；
背景颜色：蓝色；
}
.btn自定义：焦点，
.btn-custom.focus{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：悬停{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
宽度：200px；
高度：150像素；
}
.btn自定义：活动，
.btn-custom.active，
.open>.dropdown-toggle.btn-custom{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：活动：悬停，
.btn自定义。活动：悬停，
.open>.dropdown toggle.btn自定义：悬停，
.btn自定义：活动：焦点，
.btn自定义。活动：焦点，
.open>.dropdown toggle.btn自定义：焦点，
.btn自定义：active.focus，
.btn-custom.active.focus，
.open>.dropdown-toggle.btn-custom.focus{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：活动，
.btn-custom.active，
.open>.dropdown-toggle.btn-custom{
背景图像：无；
}
.btn-custom.disabled，
.btn自定义[已禁用]，
字段集[已禁用]。btn自定义，
.btn自定义。禁用：悬停，
.btn自定义[禁用]：悬停，
字段集[已禁用]。btn自定义：悬停，
.btn自定义。禁用：焦点，
.btn自定义[禁用]：焦点，
字段集[已禁用]。btn自定义：焦点，
.btn-custom.disabled.focus，
.btn自定义[已禁用]。焦点，
字段集[已禁用].btn-custom.focus，
.btn自定义.禁用：活动，
.btn自定义[禁用]：活动，
字段集[已禁用]。btn自定义：活动，
.btn-custom.disabled.active，
.btn自定义[已禁用]。处于活动状态，
字段集[已禁用].btn-custom.active{
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn定制.徽章{
颜色：#5bc0de；
背景色：#fff；
}

---

Default

不使用边框，而是绝对定位的伪元素：

.btn
{
背景色：#DB631E；
边框颜色：#DB631E；
}
.btn海关{
位置：相对位置；
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
宽度：170px；
高度：120px；
字体大小：22px；
填充：47px 22px；
}
.btn海关：之后{
内容：“；
位置：绝对位置；
底部：0；
左：15%；
右：15%；
高度：5px；
背景：#1252cf；
}
.btn自定义：焦点，
.btn-custom.focus{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：悬停{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
宽度：200px；
高度：150像素；
}
.btn自定义：活动，
.btn-custom.active，
.open>.dropdown-toggle.btn-custom{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：活动：悬停，
.btn自定义。活动：悬停，
.open>.dropdown toggle.btn自定义：悬停，
.btn自定义：活动：焦点，
.btn自定义。活动：焦点，
.open>.dropdown toggle.btn自定义：焦点，
.btn自定义：active.focus，
.btn-custom.active.focus，
.open>.dropdown-toggle.btn-custom.focus{
颜色：#D0D4D2；
背景色：#8F101A；
边框颜色：#8F101A；
}
.btn自定义：活动，
.btn-custom.active，
.open>.dropdown-toggle.btn-custom{
背景图像：无；
}
.btn-custom.disabled，
.btn自定义[已禁用]，
字段集[已禁用]。btn自定义，
.btn自定义。禁用：悬停，
.btn自定义[禁用]：悬停，
字段集[已禁用]。btn自定义：悬停，
.btn自定义。禁用：焦点，
.btn自定义[禁用]：焦点，
字段集[已禁用]。btn自定义：焦点，
.btn-custom.disabled.focus，
.btn自定义[已禁用]。焦点，
字段集[已禁用].btn-custom.focus，
.btn自定义.禁用：活动，
.btn自定义[禁用]：活动，
字段集[已禁用]。btn自定义：活动，
.btn客户