将HTML属性放在带有CSS的输出中？
加拉沙尔
是否可以直观地显示通常仅驻留在源代码中的html属性，在html的输出中，锚定在与它们分组的元素上？
例如，下面是一些css，<span></span>为了清晰起见，它们在视觉上将一些标签分组为圆角矩形：
span{
display:inline-block;
}
span:first-child{
border:1px solid black;
border-radius:15px;
padding:10px;
}
span:last-child{
border:1px solid black;
border-radius:15px;
padding:10px;
}
<span class="complete-sentence">She <span class="verb">loves</span> him a <span>lot</span>.</span>
https://jsfiddle.net/ycpw4tzz/ <-当前发生了什么。
其中两个span标签具有“ subject”和“ verb”的类（全局属性）。我想以某种方式使输出显示看起来像这样，而不是当前的显示。
阿米特·乔基（Amit Joki）
首先，不要尝试使用不适合这种用途的东西。请改用data-*属性。
<span data-type="complete-sentence">
She <span data-type="verb">loves</span> him a <span>lot</span>.
</span>
现在，我确定了跨度，这些跨度具有data-type并使用content属性与attr，以及伪选择器:before（:after如果需要，也可以使用）为它们应用样式。
span[data-type]:before {
content: attr(data-type) " | ";
}
演示（也请注意，如果您使用:aftermakecontent: " | " attr(data-type);）
此外，用户@bryc在图像示例中还提供了一个示例，说明了您如何使用它。在这里看看
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML / CSS：如何将<ul>中的所有<li>放在同一行并居中
- 2
是否可以在CSS content属性中使用带有url（）的HTML属性中的数据？
- 3
将图片放在css文件而不是html文件中
- 4
有没有办法将HTML数据属性放在struts html：link标记上？
- 5
将grep的输出保存到带有颜色的文件中
- 6
C＃例程中的XML / XSL转换问题，以输出带有嵌入式CSS内容的HTML
- 7
将 xquery 到 html 的两个输出放在两个不同的行中
- 8
gnuplot如何将图例/键放在带有多图的第三列中
- 9
在带有条件的 React 组件中（用于过滤目的），将 Spinner 放在哪里？
- 10
有没有办法将默认css属性应用于css文件中定义的带有jquery的元素？
- 11
带有 if 的 HTML 属性控制
- 12
将输出放在c ++中的main函数中的问题
- 13
将表格放在 html 的画布中
- 14
客户-服务器架构结构（带有节点js）-将index.html文件放在哪里？
- 15
将div放在带有叠加层的页面上居中
- 16
Matplotlib将y轴放在带有翻转标签的右侧
- 17
带有tabindex =“-1”的模态将重点放在tab上
- 18
将图片放在带有换行符的文本旁边
- 19
如何使用在属性中带有“-”的html DOM来解析用户定义的html属性？
- 20
单独的css文件在html文件上不起作用，但将css与html放在同一文件中
- 21
将元素放在CSS类中的地方有什么区别？
- 22
如何借助CSS在HTML中显示带有文本的图标？
- 23
带有CSS的HTML5中的居中按钮
- 24
如何借助CSS在HTML中显示带有文本的图标？
- 25
AJAX返回带有输出的HTML代码
- 26
带有html的输出示例
- 27
输出带有数组的HTML树
- 28
带有 html/css/javascript 的可复制控制台输出？
- 29
如何将日期放在 R 中输出的顶列
我来说两句