Photoshop Question posted in
The official user guide can be found here.

A specific effect in css and bootstrap – Photoshop

I am new to bootstrap and made some stuff.

but there is a specific effect of highlight a text i can’t reach. i made it wrong many times – like the BG was offset or the line had no spacing and many more problems.

Can you please explain me how to do this ?

Tenter image description herehank !

edit:
Thae image is photoshop, how the final result should look

Tags:

2

Answers


  1. 0

    Does this answer your question?

    With the use of pseudo elements we can make a ::before element appear on hover

    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>
    Login or Signup to reply.
  2. 0

    Or you could work with a border and padding like in the following demo and this fiddle.

    For the unhovered link I’ve added a transparent border to avoid jumping on hover. You could probably also do this with 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search