如何限制下划线的宽度和固定位置到中间？

Question

我试图在我一直在开发的网站的标题中添加下划线。此下划线在悬停或活动页面时有效，问题是如果我更改宽度属性，我无法弄清楚将下划线置于文本中心

网站是https://www.faithful-farming.com/

代码如下：

elementor-item:after {
background-color: #E98B0D !important;
height: 5px;   
content: "";
bottom: 0;  
width: 100%;    
left:0;   
border-radius: 4px;
line-height: 2px;  
}

因此，如果我将宽度：从 100% 更改为 80%，它不会居中并且由于 left:0 而设置为左侧；我尝试使用对齐中心，但我不知道为什么不起作用。

• 问题：如果我改变尺寸，它不会居中。

Answer 1

如果您希望将宽度小于 100% 的元素居中，则不能将左边距设置为 0。只需将宽度更改为 80%，将左边距更改为自动或 10%。

background-color: #E98B0D !important;
height: 5px;   
content: "";
bottom: 0;  
width: 80%;    
left:10%;   
border-radius: 4px;
line-height: 2px;  
}```

Answer 2

由于您的网站未设置为公开，我只能假设您到底想要什么。根据 elementor-item 本身的属性，尝试以下操作：

    .myElement::after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 80%;
        height: 5px;
        border-radius: 4px;
        background-color: #E98B0D !important;
    }

如果现在更改伪元素的 with，下划线保持居中。

这是一个小提琴：https://jsfiddle.net/qfo2xjrh/