Text css和引导中的特定效果

我对bootstrap还不熟悉，还做了一些东西

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

你能告诉我怎么做吗

谢谢!

编辑：

---

这张图片是photoshop，最终的结果应该是什么样子的这回答了你的问题吗

通过使用伪元素，我们可以使一个：：before元素出现在悬停状态

.cool链接{
颜色：红色；
位置：相对位置；
填充：0 15px；
&：悬停{
颜色：蓝色；
&：：之前{
位置：绝对位置；
左：-5px；
内容：“；
身高：100%；
宽度：3倍；
背景颜色：蓝色；
}
}
}

或者您可以使用边框和填充，如以下演示和本演示中所示

对于未覆盖的链接，我添加了一个透明的边框，以避免在悬停时跳跃。您也可以使用边距/填充来完成此操作

.styled链接{
颜色：#5F6065；
字号：2em；
填充：15px；
左边框：2倍实心透明；
保证金：5px；
文字装饰：下划线；
}
.样式化链接：悬停{
颜色：灰色；
背景色：#D1E7FE；
字号：2em；
左边框：2倍纯色灰色；
}

效果如何？链接左侧的边框或悬停时的背景色？两者都是。效果应该是高亮显示的背景和右边的细线（带间距）。我搞不好：（谢谢你，这正是我想要的。我也会看看它，并从中学习，以备将来的任务！太棒了！！有没有办法让线条与背景分开几个像素，就像我上传的图像一样？感谢

content box

这样的背景剪辑。你可以像感谢所有的帮助一样得到它。有可能吗可以让高亮背景变大（与线条大小相同），而文本变小吗？如果我减小文本大小，高亮大小也会变小。不客气。

display:inline block；

在这里应该有帮助。请参见此。感谢您的帮助，只缺少背景

.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>