通过 CSS attr() 获取属性的第一部分/最后一部分

Question

是否可以在CSS中使用attr()仅获取属性的第一部分？我的意思是，在某个字符(主要是空格(之前定位属性的一部分。例如，我想从属性hello="foo bar"中提取foo或bar，只需使用 CSS。

真诚地，我希望答案是否定的，但我不太确定。

Answer 1

通用答案是否定的，但在某些特定情况下，我们可以找到一些技巧。由于您有一个空格作为分隔符，我们可以依靠word-spacing和/或text-indent以及一些溢出来隐藏单词的一部分，然后调整width。

下面是一个示例：

.first:before {
content: attr(data-hello);
word-spacing: 50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
.first:after {
content: attr(data-hello);
text-indent: -60px;
word-spacing:50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}

<span class="first" data-hello="foo bar">
some text
</span>