css 和 bootstrap 中的特定效果

Question

我是 bootstrap 的新手，做过一些东西。

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

你能解释一下怎么做吗？

Tenter image description here谢谢！

编辑： Thae 图像是 photoshop，最终结果应该如何

Answer 1

这是否回答了您的问题？

通过使用伪元素，我们可以让 ::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>

Answer 2

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

对于未悬停的 link 我添加了透明边框以避免在悬停时跳跃。你也可以用 margin/padding.

来做到这一点

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

css 和 bootstrap 中的特定效果

A specific effect in css and bootstrap

text

background

vertical-alignment