Css 使用psudo元素自定义按钮，只是每个按钮上的内容不同如何保持干燥

HTML是带有lis的ul，包含我的导航选项，如主页、联系人、关于等。。。我想知道什么是最好的方法来添加这个效果到每个按钮，因为每个按钮都有不同的内容，将需要一个不同的图标。如果您不想通读代码，功能如下：

在HTML中，它以前是

主页

现在被删除并替换为包含“HOME”的before伪元素，该元素在悬停时向上移动-20px（溢出被隐藏）。 有一个after伪元素，它包含一个与按钮相关的图标（home图标、book图标等），位于按钮下方，悬停时向上移动到before伪元素所在的位置

我怎样保持这个干燥

这是一个密码笔：

---

前后都有一个简洁的说明，内容可以使用数据属性值

你的图标css会是这样的

content: attr(data-icon)

您将在html数据属性中添加图标

<li><a href="../nextpage/next.html" data-icon="\f015"></a></li>

---

演示：有什么问题吗？你所要做的就是为每个按钮声明自定义

。菜单a:：在{content:'\f015'；}

之前，指定图标。那么每个按钮都应该有一个类吗？他想保持它干燥，我明白，最好是在我的脑海中使用类似content:attr（数据图标）的东西，因为你只需要将数据图标添加到html中，而css将是相同的白鹭！因此，对于文本内容，是否需要在每个li上设置类来更改内容：“ABOUT”到相应的按钮？还是有更好的方法？你是说“家”这个词？这是完全相同的事情，你的html将有一个数据图标和一个数据字/数据或任何你想叫它

<li><a href="../nextpage/next.html" data-icon="\f015"></a></li>