Html 如何使用 CSS 从检索到的数据属性值中go 除子字符串

发布于09月26日

我使用attr()css函数来检索元素的属性值:

Html:

<div class="othermeta"
     data-name="name@Classification"
     data-content="content@Public" />

Css:以下内容:

div.othermeta:after {
    content: attr(data-name) ": " attr(data-content);
}

结果不出所料:

名称@分类:内容@公共

现在，我想从检索到的属性值中go 掉"name@"和"content@"，使结果看起来如下所示:

分类:公共

有没有人知道如何在没有JavaScript的情况下做到这一点？

div.othermeta:after {
    content: attr(data-name) ": " attr(data-content);
}

<div class="othermeta"
     data-name="name@Classification"
     data-content="content@Public" />

推荐答案

Css不是一种脚本语言.虽然它确实有一些类似函数的功能，但它不进行字符串解析.

通过使用这两种可用的伪元素，你可以让could件东西成形，但它是极其脆弱的.字体大小、字体系列等的任何更改都会 destruct 它.

.othermeta {
  position: relative;
  overflow: hidden;
}

.othermeta:before,
.othermeta:after {
  position: absolute;
  background: #fff; /* critical for masking */
}

/* note reverse order for proper layering */
.othermeta:after {
  content: attr(data-name) ": ";
  transform: translateX(-53px);
  padding-right: .5rem; /* word spacing */
}

.othermeta:before {
  content: attr(data-content);
  transform: translateX(40px);
}

/* override for different name attribute value */
.othermeta[data-name^="name@Other"]:before {
  transform: translateX(76px);
}

<div class="othermeta" data-name="name@Classification" data-content="content@Public">
  &nbsp;
</div>

<div class="othermeta" data-name="name@OtherClassification" data-content="content@Private">
  &nbsp;
</div>

Html 如何使用 CSS 从检索到的数据属性值中go 除子字符串

推荐答案

Html相关问答推荐

角｜将动态html属性添加到子组件

Chrome中是否有一个本地显示密码功能，用于`input type = password/`？""<"">

只有一行上有溢出的CSS网格

在iOS中调整HTML邮箱内容的大小

如何使用html和css关键帧创建动画

在单独的容器之间堆叠上下文

需要帮助创建一个简单的html css网格布局

如果DIV没有特定的sibling 姐妹，则以CSS为目标

文本幻灯片显示动画

将精选选项的价格合并为一个价格HTML、PHP和JQuery

水平行中按钮的垂直偏移

Web 组件 #shadow-root css 泄漏到文档

在 CSS 中的 div 中获取文本以环绕其他文本？

绝对类在另一个绝对类之上

如何让一个 div 始终贴在容器的边缘？

如何动态调整彼此重叠的两个 div 的大小，使它们在增长时保持相同的高度

Css 左属性问题

如何使用 css 将图像变成黑色并使文本出现在悬停时？

使用 CSS 样式化进度条

更改包含图标高度的 div