css 和 bootstrap 中的特定效果答案

【问题标题】：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>

【讨论】：

感谢您的帮助，只是缺少背景