仅用CSS创建无属性装饰性自定义标签的可行性与实现问询

嘿，刚好我之前折腾过这个！如果你只想用CSS做个纯装饰用的自定义标签，完全不用碰JavaScript，也不用给标签加任何额外属性，这事儿真的超简单——浏览器其实原生就支持自定义HTML标签，我们只需要用CSS给它套上好看的样式就行。

具体步骤来啦： #

• 1. 在HTML里直接用自定义标签
  就像用<p>、<span>这些普通标签一样，直接写你自己命名的标签就行，比如：

  <mytag>blah blah blah</mytag>
  

  提醒下：标签名别和现有HTML标准标签重名，比如别用<div>或者<h1>，选个专属的名字，比如<fancy-heading>、<decorative-text>都可以，怎么好记怎么来。

• 2. 用CSS给标签加装饰样式
  直接把自定义标签当作普通CSS选择器来写样式就行，这里帮你修正了示例里拼写错误的blod为bold：

  mytag {
    font-family: "cybertron";
    font-size: 2.5em;
    font-weight: bold;
    color: blue;
    /* 还能加更多装饰效果，比如文字阴影、边框、内边距啥的 */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    padding: 0 8px;
    border-radius: 4px;
  }
  

  小细节：自定义标签默认是inline元素，如果想让它有块级元素的特性（比如独占一行），可以给它加display: block;或者display: inline-block;。

额外小提醒 #

• 兼容性完全不用担心：现代浏览器（Chrome、Firefox、Safari、Edge）都完美支持，就连IE11也能识别，只是需要给它设置display属性确保样式正常生效。
• 因为是纯装饰用途，完全不用纠结语义化——毕竟我们只是用它来做视觉装饰，不需要搜索引擎或屏幕阅读器解读它的语义，怎么好看怎么来就对了！

内容的提问来源于stack exchange，提问作者SparkShredder