如何仅使用CSS创建HTML标记

我有一个HTML标记，如下所示：

编辑组

编辑标签
编辑字段

我必须给样式与CSS的这个标签没有任何变化的HTML标签，使输入如下图。id=“Code\u F”必须转换为输入标记。我怎样才能只用CSS来实现这一点

最重要的是，这项工作必须在不向HTML标记添加任何元素或直接更改HTML标记的情况下完成，所有更改都必须使用CSS完成！ 任何帮助都将受到感谢

否，您可以使用生成/替换这样的内容

p:after {
    content: "lorem";
}

如果要更改html，必须使用javascript。

#code\G{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
字号：700；
线高：1；
颜色：#d9d3d3；
文本对齐：居中；
位置：相对位置；
}
#代码{
位置：绝对位置；
右：15px；
顶部：16px；
背景：#fff；
填充：0 10px；
颜色：#000；
}
#代码{
最小高度：46px；
框大小：边框框；
边框：1px实心#ced4da；
边界半径：4px；
填充：15px 15px 10px 15px；
字体大小：16px；
字体大小：400；
颜色：#495057；
文本对齐：右对齐；
边缘顶部：8px；
}

编辑组

编辑标签
编辑字段

没有一种方法可以使用HTML/CSS以编程方式创建/删除/替换DOM元素。这需要Javascript，或者手动创建元素，即使像

之后的
这样的
伪元素也只能做这么多，因为无法在content属性中添加工作输入，下面是一种可以在Javascript中使用的方法



单击按钮创建基本输入字段

创造
函数myFunction（）{
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“文本”）；
x、 setAttribute（“值”，“这是一个简单的输入”）；
文件.正文.附件（x）；
}

为此，您可以使用
字段集
和
图例


图例{
文本对齐：右对齐
}
.产出{
字体：1rem'Fira Sans'，Sans serif；
}
输入{
边界：无；
宽度：100%；
大纲：无；
}
字段集{
边界半径：5px；
宽度：400px；
}
输入：：占位符{
文本对齐：右对齐
}

编辑字段
注意：

标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。这在CSS中是不可能的；CSS是一种表现形式，它只能改变HTML的表现形式，在某些方面，它不能创建或插入新元素。