CODEWITHSUNDEEP
htmlcss
Rik Johnson
Rik Johnson

Reputation: 111

How to move a border bottom so it starts past the text?

I know I can move my border bottom up and down via padding or line height, but how do I move it left and right so that the beginning of the border begins after the text starts, like

TEXTTEXTEXT

      ______________

Thank you

Current Code:

div {
  border-bottom: 1px solid white;
}

h1 {
  padding-right: 1em;
}

This extends the length of the border to the right, but it doesn't change its beginning point, so it looks like

TEXTTEXTEXT

___________________

Upvotes: 2

Views: 1920

Answers (4)

Mia
Mia

Reputation: 233

Not that great but you could do something like this:

    <div>
     <h1>TEXT HERE</<h1>
    </div>

CSS:

    div {
    border-bottom: 3px solid red;
    margin-left:50px;
    position:relative;
    width:200px;
    }

    h1 {
      position: relative;
      left: -30px;
      margin:0;
      padding:0;
     }

Codepen: https://codepen.io/anon/pen/bRPNVZ

Upvotes: 0

Nicholas
Nicholas

Reputation: 115

You could use box-shadow, but the background has to be a solid color you can match.

p {
  background: white;
  box-shadow: 50px 0px 0px 0px white, 50px 2px 0px 0px black;
  display: inline-block;
}
<p>Underlined Text</p>

Upvotes: 1

flyer
flyer

Reputation: 1424

If you use an :after pseudo-class, then you can add a DOM element after the title that can be absolutely positioned the way you want it.

h1 {
  display: inline-block;
  padding-right: 1em;
  position: relative;
}

h1:after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  border-bottom: 1px solid #ccc;
  display: block;
}
<h1>TEXTTEXTEXT</h1>

Upvotes: 4

Faizan Amin
Faizan Amin

Reputation: 458

Try using text indent like this. Not a good idea. But solves problem

border-bottom:5px solid #ccc;
margin-left:50px;
text-indent:-40px;

Upvotes: 1

Related Questions