html - CSS:从元素本身获取边框颜色

Question

如何通过 CSS 获取元素本身的颜色？我希望边框颜色与文本本身的颜色相同。

示例 HTML:

<span class="status-name" style="color:#ff0000">Max</span>

CSS:

.status-name {
    font-weight: bold;
    border-bottom: 1px solid ???;
}

底部边框现在应该有颜色 #ff0000。我尝试了 inherit、auto 甚至 attr(data-color)(结合 data-color="#ff0000" 属性)，但所有这些都使规则对浏览器无效。

请注意，如果可能的话，我需要通过 CSS 来解决这个问题，因为页面上有数千个带有此类类的元素，而且主要通过手机访问。我也知道通过 style 设置 CSS 不是最先进的，但是有数百种不同的颜色值，为每种颜色创建一个自己的 CSS 类是不合理的，不是吗？

Answer 1

默认情况下，边框继承框的颜色属性，因此在 CSS 声明中不设置颜色:

border-bottom: 1px solid;