html自定义属性不显示在标签上，html代码编写css代码实现

哎哟，小伙子（小姐姐），没想到你还在瞎几把写 html 呢？自定义属性都不会写，你是不是被 html 给坑过了？

不过，别担心，老刘我这就给你讲解一下怎么让自定义属性显示在标签上啊！不然你的 html 代码是看不出来自定义属性的，是不是很麻烦啊？

好了，关于自定义属性不显示在标签上这个问题，咱们得先明确一点：自定义属性呢，是为了配合 JavaScript 等脚本语言来使用的，你写上去了，如果没被脚本语言调用，那当然不显示！所以，在写完自定义属性之后，记得调用它哟~

再说了，自定义属性的格式也不能乱写啊！一般来说，自定义属性的格式是 data-*，* 代表你自己随便写的属性名称，比如你写了 data-id，那么这个自定义属性就是用来存储 id 数据的啦~

好了，现在咱们回到正题，怎样让自定义属性显示在标签上？方法其实很简单啊，就是利用 CSS 在页面上显示自定义属性的值。具体怎么写呢？看下面代码：

```css

[data-id]::after{

content: attr(data-id);

}

```

加了这个 CSS 代码之后，你会发现，在这个带有自定义属性 data-id 的标签上面，会自动显示出 data-id 的值啊！是不是很方便啊？

那么，这个 CSS 代码到底是怎么实现的呢？其实很简单，它就是利用了 content 这个 CSS 属性，把 data-id 的值放在这个属性里面，然后用 after 伪元素把它添加到标签上，这样就能够实现让自定义属性显示在标签上了。

好了，这样，自定义属性显示在标签上的问题解决啦！你学会了吗？别忘了，小伙子（小姐姐），html 的知识点多着呢，要好好学习啊！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/