利用属性 data- 实现伪元素样式的动态显示与隐藏

需求大概是这样的：一张图片，图片左上角会有一个图片类别标签

当然，我们可以有多种方式实现这样的样式效果，比如使用position定位，将标签直接相对于图片定位就可以实现；

但是，我接手到的这个页面，这个标签是使用伪元素实现的，大概具体代码如下：(只展示部分代码，业务相关代码不便展示)

  <Link
    href={`/${post.slug}`}
    className={styles.left}
    data-directory-name={post.directory?.name || ''}
    style={{ background: `...` }}
  />

  .left {
    position: relative;
    width: 240px;
    height: 140px;
    flex-shrink: 0;
  }

  .left::after {
    content: attr(data-directory-name);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 6px;
    height: 25px;
    background-color: #0abc54;
    color: white;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    margin: 10px;
    cursor: pointer;
  }

这里会有一个问题——就是有可能我们的这个标签 name 没有值，那么此时页面上就有只有一个没有值的空的标签块，如下：

那么这个问题应该怎么解决呢？

一开始，我想直接相对定位好了，标签不要用伪元素实现了，但是这样的话改动到的代码有点多，就想能不能在伪元素的基础上，根据 data-directory-name 的值判断呢？

诶嘿，还真被我找到一个方式（还是自己对 css 的各项属性不够熟悉噻），是可以根据值判断的

.left[data-directory-name=""]::after {
  display: none;
}

最近忽然就想明白一件事情，其实，一个需求的实现可以有很多种方式。

有时候，我们下意识的就会去选择自己最熟悉，无需研究/学习就可以实现的方式，可是如果永远都在舒适区，我们也将一直不会有成长。所以有的时候，不要跟自己妥协，尝试去找有没有最优解，在这个过程中，或许会有意想不到的收获。