html - 如何为包含事件链接的跨度应用 css 样式

标签 html css

<分区>

我目前有 2 个链接包含在 2 个跨度内,但是当单击一个链接时,该链接有一个类“linkActive”。我需要为包含事件链接的范围应用边框如何在 css 样式中执行此操作

     HTML
        <div>
           <span class="sec">
              <a>Link1</a>
           </span>
           <span class="sec">
             <a class="linkActive">Link2</a>
           </span>
        </div>

我想将边框应用于包含带有链接事件类的 anchor 标记的跨度

 i tried    span.sec a.linkActive{
                 border-bottom: 3px solid black;
             }

好像不行。任何帮助将不胜感激

最佳答案

您可以使用伪元素为自身添加边框

div span {
  display: inline-block;
}
div span a {
  display: block;
  padding: 10px 20px;
  position: relative;
}
div span a.linkActive:after {
  content: '';
  position: absolute;
  width: 100%;
  background: black;
  height: 3px;
  bottom: 0;
  left: 0;
}
<div>
  <span class="sec"><a>Link1</a></span>
  <span class="sec"><a class="linkActive">Link2</a></span>
</div>

关于html - 如何为包含事件链接的跨度应用 css 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27855770/

上一篇:jquery - 备用表行颜色更改

下一篇:javascript - Bootstrap 3 popover 作为嵌套消息框/评论插件

相关文章:

javascript - 找不到如何使我的广告居中。我试过对齐 ="center"和边距 :auto but nothing works.

html - 表单页面固定高度和响应能力

html - 背景图像上的文本白线

html - CSS:如何仅调整右侧元素的大小?

css - (AngularJS) 整个网站只少了一个文件

css - 在与复选框标签相同的行中输入复选框

html - 输入字段周围的隐形边框不起作用

html - 网站页脚下方的颜色

java - 正则表达式用java解析文本文档中的电话号码

html - 如何仅使用 CSS 制作网格(如方格纸网格)?