CSS：从元素本身获取边框颜色(CSS: Get border color from element itself)

CSS：从元素本身获取边框颜色(CSS: Get border color from element itself)

我如何通过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类是不合理的，不是吗？

How could I get the color of the element itself via CSS? I wanted to have the same border color as the color of the text itself.

Example HTML:

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

CSS:

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

The bottom border should have the color #ff0000 now. I tried inherit, auto or even attr(data-color) (in combination with a data-color="#ff0000" attribute) but all makes the rule invalid for the browsers.

Please note that I need to solve this problem if possible via CSS because there are some thousands elements on the page with such classes and it's accessed mainly by mobile phones. Also I know that setting CSS via style is not state of the art but there are hundreds of different color values and it's not reasonable to create for each color an own CSS class, isn't it?

最满意答案

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

border-bottom: 1px solid;

By default borders inherit the color propertie of the box so set no color on the CSS declaration:

border-bottom: 1px solid;