CSS内容属性 - 使用CSS将属性设置为大写

Question

注意：我无法修改XML - 如果可能的话，必须使用CSS进行更改。还要注意，当涉及到CSS时，我有点新手。

以下是一个示例XML片段：

<example type="f"> blah blah blah</example>

以下是CSS代码片段的示例：

example
{
    content: "Example type " attr(type) ":  ";
}

这将按预期产生输出：

例如类型 f：

是否可以使用 CSS 将属性设置为大写？像下面这样...也许使用内联 CSS...

例如类型 F：

我已经尝试了几种方法，例如没有成功。

example.attr {
  text-transform: uppercase;
}

任何帮助都将不胜感激

谢谢

- beginAgain

Answer 1

content属性仅适用于伪元素。

因此你的代码应该是：

example::before
{
    content: "Example type " attr(type) ":  ";
}

这可以设置为 text-transform:uppercase，但它会应用于整个 content 字符串，而不仅仅是属性本身。

example::before {
  content: "Example type " attr(type)":  ";
  text-transform: uppercase;
  color: red;
}

<example type="f">blah blah blah</example>

- Paulie_D

---

哎呀 - 我曾经评论过“谢谢，这个方法很有用”，但我想我没有点击添加评论。 :) - beginAgain

Answer 2

内容 content 属性应该与伪元素一起使用。

引用 MDN 文档:

内容 CSS 属性与 ::before 和 ::after 伪元素一起用于在元素中生成内容。
_来源

example:before {
  content: "Example type " attr(type)":  ";
}

<example type="f">blah blah blah</example>

然后，您可以将想要应用的样式应用到伪元素：

example:before {
  content: "Example type " attr(type)":  ";
  text-transform: uppercase;
}

<example type="f">blah blah blah</example>

如果您只想将属性大写，那么您可以使用伪元素after并对其进行定位：

example {
  position: relative;
  display: block;
}
example:before {
  content: "Example type ";
  display: block;
}
example:after {
  content: attr(type)": ";
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 93px;
}

<example type="f">blah blah blah</example>

我不一定推荐这样做，但它是可以实现的。

- Jacob G

---

谢谢 - 这个方法很有效，但我认为Paulie_D刚好比你快一步 - 不过你得到了一个赞。 - beginAgain

是的，在我发帖之前他大约30秒就注意到了，我还没看到 :) - Jacob G