【问题标题】:A specific effect in css and bootstrapcss 和 bootstrap 中的特定效果
【发布时间】:2016-07-05 12:39:53
【问题描述】:

我是新手,我做了一些东西。

但是突出显示我无法到达的文本有一个特定的效果。我犯了很多次错误——比如 BG 偏移或者线条没有间距和更多问题。

你能解释一下怎么做吗?

Tenter image description herehank!

编辑: Thae 图像是 Photoshop,最终结果应该是什么样子

【问题讨论】:

  • 有什么作用?链接左侧的边框还是悬停时的背景颜色?
  • 他们两个。效果应该是突出显示的背景和右侧的细线(带有间距)。我做错了:(

标签: text background vertical-alignment


【解决方案1】:

或者您可以使用边框和填充,如以下演示和此fiddle

对于未悬停的链接,我添加了一个透明边框以避免在悬停时跳转。您也可以使用边距/填充来做到这一点。

.styled-link {
  color: #5F6065;
  font-size: 2em;
  padding: 15px;
  border-left: 2px solid transparent;
  margin: 5px;
  text-decoration: underline;
}

.styled-link:hover {
  color: gray;
  background-color: #D1E7FE;
  font-size: 2em;
  border-left: 2px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="styled-link">Highlighted link</a>

【讨论】:

  • 谢谢,这正是我想要的。我也会看看它并从中学习以完成未来的任务!太棒了!!
  • 有没有办法让线条与背景分离几个像素,就像我上传的图片一样?谢谢
  • 使用content-box 用于背景剪辑,如css-trick。你可以得到它像this
  • 感谢您的所有帮助。高亮背景是否可以大(与线条相同)而文本小?如果我缩小文本大小,突出显示的大小也会变小
  • 不客气。 display: inline-block; 应该在这里提供帮助。看到这个fiddle
【解决方案2】:

这能回答你的问题吗?

通过使用伪元素,我们可以让 ::before 元素出现在悬停时

https://jsfiddle.net/jfe1uf50/

.cool-link {
  color:red;
  position:relative;
  padding:0 15px;
  &:hover {
    color:blue;
    &::before {
     position:absolute;
     left:-5px;
     content:"";
     height:100%;
     width:3px;
     background-color:blue;
    }
  }
}
<a href="/" class="cool-link">Hello World!</a>

【讨论】:

  • 感谢您的帮助,只是缺少背景
猜你喜欢
  • 1970-01-01
  • 2014-06-05
  • 1970-01-01
  • 1970-01-01
  • 2021-10-07
  • 2012-12-25
  • 2020-04-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多