Question

注意：我根本无法改变XML - 如果可能的话，这种改变必须使用CSS来完成。还要注意我在CSS方面有点新手。

以下XML片段就是我所拥有的一个例子：

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

CSS的片段

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

这会产生预期的输出：

示例类型f：

是否可以使用CSS将attr设置为大写？如下所示......也许使用内联CSS ...

示例类型F：

我尝试了几件事，例如没有成功。

example.attr {
  text-transform: uppercase;
}

任何帮助将不胜感激

谢谢

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>

Answer 2

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

引用MDN文档：

内容CSS属性与:: before和:: after伪元素一起使用，以在元素中生成内容 <子> source

＆＃13;

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

＆＃13;

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

＆＃13;

然后你可以将你想要的样式应用到pusedo元素：

＆＃13;

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

＆＃13;

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

＆＃13;

如果你希望只是 attr为大写，那么你可以只使用after伪元素并定位它：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我不一定会推荐它，但可以做到。

CSS Content属性 - 使用CSS将attr设置为大写

2 个答案: