html - 使用 :before pseudo-element 的 HTML 最少一个元素的 CSS Sprite 菜单图标

Question

总结/简而言之

是否可以在一个 HTML 中拥有一个全宽(显示: block )可点击的超链接 HTML 元素，该元素具有独特的、定位的 sprite 背景图像类，所有这些都在一个 HTML 中 <a>元素？

---

---

---

背景

目前我有一个精心设计的 HTML 菜单，每个超链接都有自己独特的图标 Sprite 背景位置。

每个 Sprite 图标都有自己独特的类，这是在默认 menu 之上添加的包含背景 url 和总体布局的类。所有图标的大小完全相同，均为 13 x 13 像素。每个超链接都有一个完整的 using display:block。悬停 block 宽度后必须立即激活鼠标悬停，以便短文本或长文本超链接获得相同的全宽悬停颜色。

Sprite CSS

.home  {background-position:0 -13px}
.about {background-position:0 -1638px}
.ethos {background-position:0 -2944px}
.etcet {background-position:0 -5611px}

通用 CSS

li a{
    display: block;
    line-height: 2em;
    color: black;
    padding: 10px 1em 10px 2em;
    }

.menu{
    display: inline-block;
    background: url(icons.png) no-repeat;
    width: 13px; height: 13px;
    vertical-align: middle;
    margin: -2px 15px 0px -29px;
}

---

目前，以下不受欢迎的臃肿 HTML 标记有效...

不受欢迎:臃肿的 HTML

<li>
   <a href="/home">
      <p class="menu home"></p> Home
   </a>
</li>

...但我想知道是否有可能将它(不丢失任何基本功能)减少到绝对最低限度的 HTML:

需要:最小的 HTML

<a href="/home" class="home">Home</a>

---

新的 CSS

a{
    position: relative;
    padding: 0 0 0 1em;
}

a:before{
    content:'';
    position: absolute;
    background-image: url(icons.png);
    background-repeat: no-repeat;   
    top: .75em;
    left: 2px;
    height: 13px;
    width: 13px;
}

---

坚持设置独特的背景位置

我尝试了 a:before{}解决方法，虽然背景图标框相对于超链接很好地定位，并且全宽度鼠标悬停也有效，但 Sprite 本身都是从背景图像的 x=0 y=0 的初始起始轴开始的!

换句话说，所有 Sprite 图标都取自 Sprite 背景png文件的第一 block 。 background-position 似乎没有使用独特的个人类名使用 a:before{} 时.

如果我从 a:before{} 移动背景图像至 a{} ，然后布局完全无法修复。

总而言之，有没有一种方法可以使单元素 HTML 与超链接上的 sprite 一起工作，只使用 a:before{}不需要任何额外的无意义的 html 元素，例如 <spans>或 <p> , 并实现 Sprite 定位的所有要点和完整的方 block 悬停能力？

非常感谢任何帮助!

Answer 1

您需要将伪类添加到自定义类中。我已经添加了一个图像它是如何工作的。它比数百个单词解释得更好。

.home::before {
  background-position: 0 0px;
}
.about::before {
  background-position: 0 -13px;
}
.ethos::before {
  background-position: 0 -26px;
}

此外，如果您有一个简单的菜单，请删除 ul、li 标签并将所有链接包含在 nav 标签中。

<nav role="menu" aria-labelledby="navigation menu">
  <a href="/home" class="home">Home</a>
  <a href="/about" class="about">About</a>
  <a href="/ethos" class="ethos">Ethos</a>
</nav>

nav {
  display: inline-flex;
  flex-flow: column;
}

a {
  position: relative;
  padding: 0 1.3rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

a:before {
  content: '';
  position: absolute;
  background-image: url('https://i.ibb.co/M7008LV/sprite.png');
  background-repeat: no-repeat;
  top: 50%;
  left: 2px;
  height: 13px;
  width: 15px;
  transform: translateY(-50%);
}

.home::before {
  background-position: 0 0px;
}

.about::before {
  background-position: 0 -13px;
}

.ethos::before {
  background-position: 0 -26px;
}

a:hover {
  background-color: #ffd73d;
}

<nav role="menu" aria-labelledby="navigation menu">
  <a href="/home" class="home">Home</a>
  <a href="/about" class="about">About</a>
  <a href="/ethos" class="ethos">Ethos</a>
</nav>