CODEWITHSUNDEEP
htmlcss
Nikko
Nikko

Reputation: 129

Line right after text

I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code

My Text<hr/>

It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.

Upvotes: 12

Views: 41382

Answers (14)

Temani Afif
Temani Afif

Reputation: 274374

You can easily do this using border-image

h1,h2 {
  --l: 5px;  /* line thickness */
  --g: 10px; /* gap */

  border-image:
    conic-gradient(red /* the color*/ 0 0) 0 1 0 0/
    calc(50% - var(--l)/2) 100vw calc(50% - var(--l)/2) 0/
    0 calc(100vw + var(--g)) 0 0;
    
  width: fit-content;
}
<h1>Title</h1>
<h2>Another Title</h2>

I wrote a detailed article explaining such technique: https://www.smashingmagazine.com/2024/01/css-border-image-property/

Upvotes: 0

Deepak
Deepak

Reputation: 303

Using FlexBox Property this can be achieved easily.

.mytextdiv {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.mytexttitle {
  flex-grow: 0;
}

.divider {
  flex-grow: 1;
  height: 1px;
  background-color: #9f9f9f;
}
<div class="mytextdiv">
  <div class="mytexttitle">
    My Text
  </div>
  <div class="divider"></div>
</div>

Upvotes: 23

Hashan
Hashan

Reputation: 180

Below code will let you create a line right after the caption.

<div style='overflow:hidden; white-space:nowrap;'>Caption<hr style='display:inline-block; width:100%;vertical-align:middle' /></div>

Just copy and paste above html code.

Upvotes: -1

Naeem Akhtar
Naeem Akhtar

Reputation: 1270

I was looking forward to have solution with ::before or ::after elements.

Here an is an example for the same using ::after pseudo element.

.container-text {
  font-family: sans-serif;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.container-text::after {
  content: '';
  background: #393939;
  height: 1px;
  border: 0;
  margin: auto;
  z-index: -1;
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
}

span.title {
  font-weight: normal;
  font-size: 16px;
  background: #FFF;
  padding: 5px;
}
<div class="container-text">
  <span class='title'>
        My Text and new
  </span>
</div>

codepen

Upvotes: 1

Utkarsh Bhushan
Utkarsh Bhushan

Reputation: 179

Below code did the job for me

HTML File:
----------
<p class="section-header">Details</p><hr>

CSS File:
----------
.section-header{
    float: left; 
    font-weight: bold
}

hr{
    float: left;
    width: 80%;
}

INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">

Upvotes: -2

Stoep
Stoep

Reputation: 144

I used the following technique:

Give the container div a background-image with a horizontal line. Put an element (like <h3>) in the container div (I have it on the right so float: right; )

Use the following css:

.line-container {
  width: 550px;
  height: 40px; 
  margin-top: 10px;
  background-image: url("/images/horizontal_line.png");
}

.line-container h3 {
  padding-left: 10px; 
  float: right;
  background-color: white;
}

Upvotes: 0

Ryan Gibbs
Ryan Gibbs

Reputation: 1320

The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.

Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.

HTML

This is my text.<div class='fillLine'></div>

CSS

.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}

JSFiddle Demo

Style Div for Line After Text

Hope that helps anyone who had the same goal as me.

Upvotes: 2

Mukesh Rai
Mukesh Rai

Reputation: 9

Try this. It works

<p style="float:left;">
    Hello Text
    <hr style="float:left; width: 80%"/>
</p>

You can also use this to draw a line between texts like

Hello -------------------------- Hello

Upvotes: 0

Даниил Пронин
Даниил Пронин

Reputation: 1316

<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">

Exactly what you want.

Upvotes: 1

Su&#39;
Su&#39;

Reputation: 2166

Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Blah</title>
    <style type="text/css">
        body {
            background-color : white;
            font-family : Arial;
            font-size : 16px;
        }
        .wrap {
            background: transparent url(px.png) repeat-x 0px 85%;
            /* Different fonts or text sizes may require tweaking of that offset.
               px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
        }
        .inner {
            background-color : white;
            /* Should match the background of whatever it's sitting over. 
               Obviously this requires a solid background. */
        }
    </style>
</head>
<body>
    <div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>

Upvotes: -1

Spudley
Spudley

Reputation: 168853

The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.

To demonstrate this, try the following:

<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>

There are a number of ways to override the styling of <hr> to acheive your aim.

You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:

<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>

Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.

There are various other combinations of styles you can try - give it a go and see what works.

Upvotes: 22

Sotiris
Sotiris

Reputation: 40096

Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css

hr {
    bottom: 17px;
    position: relative;
    z-index: 1;
}

div {
    background:white;
    position: relative;
    width: 100px;
    z-index: 10;
}

html

<div>My Text</div><hr/>

Demo http://jsfiddle.net/mFEWk/

What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.

Upvotes: 2

mrbellek
mrbellek

Reputation: 2300

Try this:

<html><body>My Text<hr style="float: right; width: 80%"/></body></html>

The inline CSS float: right will keep it on the same line as the text. You'll need to adjust the width if you want it to fill the rest of the line.

Upvotes: 2

benhowdle89
benhowdle89

Reputation: 37504

hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}

That sort of make sense?

<p>My text</p>
<hr />

Upvotes: -1

Related Questions