html - 为什么这个 CSS 没有禁用超链接中的文本装饰？-6ren

html - 为什么这个 CSS 没有禁用超链接中的文本装饰？

转载作者：行者123 更新时间：2023-11-28 17:06:22

我正在使用这个 codepen 中的 CSS在悬停时创建一个很酷的超链接下划线效果。但是当我去实现它时，我仍然可以看到文本装饰被应用于超链接，即使我将它设置为 none 用于 a 标记。什么问题？

编辑:我希望将炫酷的超链接效果应用于仅查看战斗世界链接。

CSS

section.custom_view h2, section.custom_view h3, section.custom_view h4 {
  color: #666;
  font-size: 150%;
  padding-top: 1.25em;
  margin-right: 0.625em; }

section.custom_view ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; }

section.custom_view li {
  float: left;
  margin-bottom: 0.625em; }

section.custom_view li a {
  display: inline-block;
  font-size: 150%;
  padding-top: 1.25em;
  text-decoration: none; }

section.custom_view li a, section.custom_view li a:visited, section.custom_view li a:hover, section.custom_view li a:active {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition: 0.5s color ease;
  text-decoration: none; }

section.custom_view li a:hover {
  color: #990000; }

section.custom_view li a.before:before, section.custom_view li a.after:after {
  content: "";
  transition: 0.5s all ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute; }

section.custom_view li a.after:after {
  bottom: -0.25em; }

section.custom_view li a.before:before, section.custom_view li a.after:after {
  height: 5px;
  height: 0.35rem;
  width: 0;
  background: #990000; }

section.custom_view li a.third:after, section.custom_view li a.sixth:before, section.custom_view li a.sixth:after {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

section.custom_view li a.before:hover:before, section.custom_view li a.after:hover:after {
  width: 100%; }

HTML

<body>
   <! -- some more HTML -->
<section class='content'>
    <ul class='breadcrumbs'>
      <li><a href="/">Home</a></li>
      <li>Searching for Worlds</li>
    </ul>
    <section class='custom_view'>
      <ul>
        <li>
          <h2>Viewing All Trials</h2>
        </li>
        <li>
          <a class="third after" href="/search?limit=15&amp;locale=en&amp;offset=0&amp;recruiting_status=Recruiting&amp;search_header_menu_left=Viewing+All+Battle+Worlds&amp;search_header_menu_right=View+All+Worlds&amp;search_terms=Mars&amp;zip_code=90033">View Battle Worlds Only</a>
        </li>
      </ul>
    </section>
   <! -- some more HTML -->
</section>
</body>