Adjust span within link

Question

Adjust span within link

Navigation

#1 by (2 votes)

2

I have a button and inside it I have a i tag with an icon of font-awesome and inside i a span with text (without span icone was on top and text below).

WhatIneedisawaytopositionthisspan4pxupbecauseithas20pxawayfromthetopandonly16pxstrong>distancefromthebottom.Paddingandmargimhavenoeffectonthisspan

li {
  list-style-type: none;
}


.button-entrar {
  color: black;
  display: inline-block;
  padding: .7rem 2rem;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1rem;
  border-radius: .3rem;
  transition: all 500ms ease;
  cursor: pointer;
  text-transform: uppercase;
  padding: .7rem 3rem;
  font-size: 1.2rem;
}

.button-entrar::before,
.button-entrar::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: black;
}

.button-entrar span::before,
.button-entrar span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: black;
}

.button-entrar:hover::before,
.button-entrar:hover::after {
  width: 100%;
}

.button-entrar:hover span::before,
.button-entrar:hover span::after {
  height: 100%;
}

.button-entrar::after {
  right: 0;
  bottom: 0;
  transition-duration: 0.4s;
}

.button-entrar span::after {
  right: 0;
  bottom: 0;
  transition-duration: 0.4s;
}

.button-entrar::before {
  left: 0;
  top: 0;
  transition-duration: 0.4s;
}

.button-entrar span::before {
  left: 0;
  top: 0;
  transition-duration: 0.4s;
}

.button-entrar:hover {
  color: black;
  transition: all 500ms ease;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<li class="nav-item">
            <a class="js-scroll button-entrar" href="#"><i class="fas fa-sign-in-alt"><span class="pl-4">Entrar</span></i></a>
</li>

EDIT

After applying position:relative to span, the edge of the hover is coming out of it, not the button.

css css3 twitter-bootstrap

asked by anonymous 26.12.2018 / 19:04

1 answer

incompatible pointer type How do I get Html.LabelFor () to display an asterisk in required fields?

score 2 · Accepted Answer

It works if you put position: relative and top: -2px :

.button-entrar span{
  position: relative;
  top: -2px;
}

Except in this case, you should only move it 2px (half the difference of 4px, getting 18px on top and 18px on bottom).

The span is an inline element. Moving it using the properties left , right , top or bottom , it needs position: relative|absolute|fixed . To apply margin or padding , it must be inline-block or block . But in this case the most appropriate is top (or bottom ), because if you use margin or padding , it will also move the icon in line with it.

Hover question

As you have already used the pseudos in <a> and you can not use in span with position relative because otherwise the vertical lines of the hover will be stuck inside the span, and also can not put in i of the icon if otherwise the icon will not be displayed, the only alternative I see is to create an empty span at the beginning of the link:

<li class="nav-item">
   <a class="js-scroll button-entrar" href="#">
      <span></span>
      <i class="fas fa-sign-in-alt">
         <span class="pl-4">Entrar</span>
      </i>
   </a>
</li>

And create the pseudos in this empty span:

.button-entrar > span::before,
.button-entrar > span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: black;
}

Note that the > symbol will point only to the parent pro span of the link.

And also change the first response code to:

.button-entrar i span{
  position: relative;
  top: -2px;
}

To point to the other span within the i of the icon;