CODEWITHSUNDEEP
htmlcss
Joaquin86
Joaquin86

Reputation: 126

moving a part of a title sligthly above css

hope you can help with this:

I have this html:

article {
  text-align: center;
  background-image: url(img/background.jpg);
  height: 20rem;
}

article h1 {
  font-size: 4rem;
}

article span {
  color: cadetblue;
  padding-bottom: 0.2rem;
  border-bottom: 0.4rem solid rgb(236, 230, 230);
}
<article>
  <h1>Hi, I am <span>web weeb.</span></h1>
  <h2>I'm a Full-stack Web Developer.</h2>
</article>

I would need the span to move slightly above the line so it is a bit higher than the rest of the h1, I tried with padding but it moves the border and not the text, also margin is not helping. Any suggestion?

thanks

Upvotes: 0

Views: 583

Answers (3)

Rusty
Rusty

Reputation: 4473

You can use the CSS transform properties for such purposes.

article span {
    color: cadetblue;
    padding-bottom: 0.2rem;
    border-bottom: 0.4rem solid rgb(236, 230, 230);

    display: inline-block;
    transform: translateY(-10px);
}

First thing, we set span to be displayed as inline-block element so that transform and other properties like width, margin etc can be applied. After that we set transform properties to translateY, which essentially says to move the element along vertical axis. Negative value is provided to move element upward.

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7066

Add position:relative; and top:-20;.

You can make the inline element as inline-block and play around with extra code, so this will lead you to have more and more code(so I rule this out).

Another Option:

There is already a code here which talks about relative, you can refer that well. relative will keep the layout in place.

article {
  text-align: center;
  background-image: url(img/background.jpg);
  height: 20rem;
}

article h1 {
  font-size: 4rem;
}

span {
  color: cadetblue;
  position: relative;
  border-bottom: 0.4rem solid rgb(236, 230, 230);
  border: 1px solid red;
  top: -20px;
}
<article>
  <h1>Hi, I am <span>web weeb.</span></h1>
  <h2>I'm a Full-stack Web Developer.</h2>
</article>

Upvotes: -1

connexo
connexo

Reputation: 56853

Whenever you need to alter the position of an element, that is, move it some distance from where it would normally appear, position: relative is your friend.

You can use 

position: relative;
top: -30px;


article {
  text-align: center;
  background-image: url(img/background.jpg);
  height: 20rem;
}

article h1 {
  font-size: 4rem;
}

article span {
  color: cadetblue;
  padding-bottom: 0.2rem;
  border-bottom: 0.4rem solid rgb(236, 230, 230);
  position: relative;
  top: -30px;
}
<article>
  <h1>Hi, I am <span>web weeb.</span></h1>
  <h2>I'm a Full-stack Web Developer.</h2>
</article>

Upvotes: 2

Related Questions