当前位置: 首页 > Web前端 > HTML5

CCS3样式:内容:属性(属性名称);

时间:2023-04-05 15:39:18 HTML5

内容:属性(属性名);从元素的html属性中动态获取内容,并将其插入到元素之前或之后。content属性:与:before和:after伪元素一起使用以插入内容。attr(attribute-name):获取元素html属性的值。通常与自定义属性数据-*一起使用。参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr语法:attr(attribute-name?[,]?)attribute-name:是CSS引用的HTML属性名称。:表示引用的属性值的单位。如果单位对于引用的属性值无效,则attr()表达式也无效。如果省略,则默认值为字符串。:如果HTML元素缺少指定的属性值或属性值不合法,则使用fallback值。该值必须有效且不能包含另一个attr()表达式。如果attr()不是CSS属性值的唯一值,那么它的值必须是指定的类型,否则CSS会使用对应的(见上表)。例子:segmentfaulta:after{content:attr(href);}例子:现实tooltiphover

.tooltip{cursor:pointer;位置:相对;显示:内联块;}.tooltip::before{内容:attr(数据工具提示);位置:绝对;顶部:-40%;左:100%;背景色:#408eff;空白:nowrap;填充:.5em;左边距:20px;border-radius:5px;}.tooltip::after{content:'';位置:绝对;顶部:0;左:125%;显示:块;border-top:10pxsolidtransparent;border-bottom:10pxsolidtransparent;右边框:10pxsolid#408eff;}