css如何读取并且使用html中的data-属性?

Question

我想做一个鼠标悬浮的下拉列表，悬浮的容器做一个三角形，三角形的left需要动态的读取容器的大小设置，所以打算通过HTML的data-属性，然后让css读取并且使用这个属性。

现在的问题是，伪元素中content属性可以读取并且使用这个属性，但是left却无法使用这个
属性。

&-content {
        position: relative;

        &::before {
            --left: attr(data-left); // 只能设置content，不能设置left
            // --left: 43px;   // 使用这个变量可以设置left，
            position: absolute;
            content: attr(data-left); // 读取并显示值43px
            // left: 43px; 
            left: var(--left); // 如果是通过attr取data-left的值是无效的css属性    
            // background: #f5f5f5;
            background: #f00;
            width: 8.5px;
            height: 8.5px;
            transform-origin: center;
            transform: rotate(45deg) translateY(-60%);
        }
    }

Answer 1

https://developer.mozilla.org...
https://caniuse.com/css3-attr
https://caniuse.com/css-genco...
mdn上说就是目前attr()只支持content

Answer 2

给你出个馊主意

const style = document.createElement("style")
style.innerHTML = ".c { background-color: red; width: 100px; height: 100px;position: absolute; top: 0;left:0; }"
document.body.appendChild(style)

Answer 3

<div data-name="aa">内容</div>

css：

div[data-name="aa"]{}

jq获取自定义属性值：

$('div').data('name')

或者

$('div').attr('data-name')

Answer 4

是要居中吗，居中一般通过下面的 css 设置，效果比较好。

div {
    position:relative;
}
.drop {
   position: absolute;
   left: 50%;
   transform: translateX(-50%)
}