如何在 css 中的 class 中排除两个元素之间的特殊字符？

Question

Html:

<div class="secondary">
            <div class="details-menu"> overview </div>
            <div class="details-menu"> <a href="#roles"> roles</a> </div>
</div>

Css:


    .details-menu::before {
        content: 'CF';
      }

      .details-menu:first-child:before {
        display: none;
      }

 .details-menu:hover{
        cursor: pointer;
        color: darkorange ;

    }
    .details-menu a:hover{
        color:darkorange;
        
    }

这里的问题是，如果鼠标指向“角色”，特殊字符会成为“角色”的一部分link。我不想那样。有什么解决办法吗？
请记住，我无法修改 .HTML 文件。它只能在 .css 文件中完成。

Answer 1

你能检查一下下面的代码吗？希望它对你有用。我们从 a 标签中移除伪元素并将其添加到 .details-menu 中。我们还根据您的要求添加悬停效果。

请参考这个link：https://jsfiddle.net/yudizsolutions/hsbky0tj/8/

<html>

  <head>
    <style>
      .details-menu {
        display: inline-block;
        cursor: pointer;
        color: #000;
      }

      .details-menu::before {
        content: 'CF';
      }

      .details-menu:first-child:before {
        display: none;
      }

      .details-menu:hover,
      .details-menu a:hover {
        color: darkorange;
      }

      .details-menu:hover::before {
        color: #000;
      }

    </style>
  </head>

  <body>
    <div class="secondary">
      <div class="details-menu"> overview </div>
      <div class="details-menu"> <a href="#roles"> roles</a> </div>
    </div>
  </body>

</html>

如何在 css 中的 class 中排除两个元素之间的特殊字符？

How can i exclude a special character between two elements in a class in css?

html

css

hyperlink

special-characters